js 页面元素的几个用法总结

下面是“js 页面元素的几个用法总结”的完整攻略。

标题

一、获取元素

在 JS 中，我们可以通过 document 对象的相应方法获取元素。其中 querySelector 和 getElementById 最为常用。

// 通过 ID 获取元素
let element = document.getElementById('elementId');

// 通过选择器获取元素
let element = document.querySelector('.elementClass');

二、设置/获取元素属性值

在 JS 中，我们可以通过 element 对象的 getAttribute()、setAttribute()、removeAttribute()，以及直接访问属性的方式来设置/获取元素属性值。

// 设置属性值
element.setAttribute('attributeName', 'attributeValue');

// 获取属性值
let attributeValue = element.getAttribute('attributeName');

// 直接访问属性
element.attributeName = 'attributeValue';

// 删除属性
element.removeAttribute('attributeName');

三、添加或移除类名

在 JS 中，我们可以通过 element 对象的 classList 属性来添加或移除类名。

// 添加类名
element.classList.add('className');

// 移除类名
element.classList.remove('className');

四、绑定事件

在 JS 中，我们可以通过 element 对象的 addEventListener() 方法来绑定事件。

element.addEventListener('eventName', function(event) {
  // 事件处理程序
});

下面是一个示例，当用户点击页面上的按钮时，将出现一个提示框。

<button id="btn">Click Me</button>

let btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
  alert('Button is clicked.');
});

五、修改元素内容

在 JS 中，我们可以通过 element 对象的相应属性来修改元素内容，其中包括 innerHTML、textContent 和 value。

element.innerHTML = 'new content'; // 修改元素里的 HTML 内容
element.textContent = 'new text content'; // 修改元素里的文本内容
element.value = 'new value'; // 修改表单元素的值

下面是一个示例，当用户在输入框中输入内容时，可以动态地修改页面的标题。

<input type="text" id="input">
<h1 id="title">Hello, World!</h1>

let input = document.getElementById('input');
let title = document.getElementById('title');

input.addEventListener('input', function(event) {
  title.textContent = input.value;
});

以上就是“js 页面元素的几个用法总结”的完整攻略，通过上面的示例说明，希望对你有所帮助。