js怎么获取常规的属性方法

通过JavaScript获取常规属性的方法：使用getAttribute()、直接访问属性、使用dataset、使用style对象

在网页开发中，JavaScript提供了多种方法来获取HTML元素的属性，这些方法包括getAttribute()、直接访问属性、使用dataset以及操作style对象等。通过这些方法，我们可以轻松地读取和操作HTML元素的各种属性，从而实现动态网页的需求。例如，使用getAttribute()方法可以获取元素的自定义属性，而直接访问属性则可以快速获取常见的标准属性，如id、class等。下面我们详细介绍每种方法的具体用法和应用场景。

一、使用`getAttribute()`方法获取属性

getAttribute()方法是获取HTML元素属性的常用方法之一。该方法可以用于获取自定义属性和标准属性。具体用法如下：

let element = document.getElementById('myElement');
let attributeValue = element.getAttribute('attributeName');

1. 获取标准属性

使用getAttribute()方法可以获取HTML元素的标准属性，例如href、src、alt等。

let imgElement = document.getElementById('myImage');
let srcValue = imgElement.getAttribute('src');
console.log(srcValue); // 输出图像的src属性值

2. 获取自定义属性

除了标准属性，getAttribute()方法也可以用于获取自定义属性，例如data-*属性。

let divElement = document.getElementById('myDiv');
let customValue = divElement.getAttribute('data-custom');
console.log(customValue); // 输出自定义属性data-custom的值

二、直接访问属性

直接访问属性是获取HTML元素属性的另一种常用方法。通过这种方式，我们可以快速访问和修改HTML元素的常见属性。

1. 获取元素的`id`和`class`

let element = document.getElementById('myElement');
let idValue = element.id;
let classValue = element.className;
console.log(idValue); // 输出元素的id值
console.log(classValue); // 输出元素的class值

2. 获取表单元素的值

对于表单元素，可以直接访问其value属性来获取用户输入的值。

let inputElement = document.getElementById('myInput');
let inputValue = inputElement.value;
console.log(inputValue); // 输出输入框的值

三、使用`dataset`获取自定义数据属性

HTML5引入了data-*属性，用于存储自定义数据。我们可以通过JavaScript的dataset属性来获取这些自定义数据。

let element = document.getElementById('myElement');
let dataValue = element.dataset.custom;
console.log(dataValue); // 输出data-custom的值

1. 访问多个自定义数据属性

let element = document.getElementById('myElement');
let dataFoo = element.dataset.foo;
let dataBar = element.dataset.bar;
console.log(dataFoo); // 输出data-foo的值
console.log(dataBar); // 输出data-bar的值

2. 修改自定义数据属性

我们不仅可以通过dataset获取自定义数据属性，还可以修改它们的值。

let element = document.getElementById('myElement');
element.dataset.custom = 'newValue';
console.log(element.dataset.custom); // 输出新的data-custom的值

四、使用`style`对象获取和设置样式属性

JavaScript提供了style对象，用于获取和设置HTML元素的内联样式属性。

1. 获取元素的样式属性

let element = document.getElementById('myElement');
let colorValue = element.style.color;
console.log(colorValue); // 输出元素的color样式属性值

2. 设置元素的样式属性

通过style对象，我们可以轻松地修改HTML元素的样式属性。

let element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';
console.log(element.style.color); // 输出red
console.log(element.style.fontSize); // 输出20px

五、使用`classList`获取和操作类名

classList属性是一个非常方便的工具，用于操作元素的类名。我们可以使用它来添加、删除和切换类名。

1. 获取元素的类名

let element = document.getElementById('myElement');
let classList = element.classList;
console.log(classList); // 输出元素的类名列表

2. 添加和删除类名

let element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
console.log(element.classList); // 输出修改后的类名列表

3. 切换类名

classList还提供了toggle方法，用于切换类名的存在状态。

let element = document.getElementById('myElement');
element.classList.toggle('toggleClass');
console.log(element.classList); // 如果toggleClass存在，则移除它；否则，添加它

六、使用`querySelector`和`querySelectorAll`获取属性

querySelector和querySelectorAll方法允许我们使用CSS选择器来获取元素，并进一步获取它们的属性。

1. 获取单个元素的属性

let element = document.querySelector('.myClass');
let attributeValue = element.getAttribute('attributeName');
console.log(attributeValue); // 输出属性值

2. 获取多个元素的属性

let elements = document.querySelectorAll('.myClass');
elements.forEach(element => {
    let attributeValue = element.getAttribute('attributeName');
    console.log(attributeValue); // 输出每个元素的属性值
});

七、使用`attributes`属性获取所有属性

attributes属性返回一个NamedNodeMap，包含了元素的所有属性。我们可以遍历这个NamedNodeMap来获取每个属性的名称和值。

let element = document.getElementById('myElement');
let attributes = element.attributes;
for (let i = 0; i < attributes.length; i++) {
    let attribute = attributes[i];
    console.log(attribute.name + ' = ' + attribute.value);
}

八、使用`outerHTML`和`innerHTML`获取元素内容

除了获取单个属性，我们还可以通过outerHTML和innerHTML获取整个元素的HTML内容。

1. 获取元素的外部HTML

let element = document.getElementById('myElement');
let outerHTML = element.outerHTML;
console.log(outerHTML); // 输出元素的外部HTML

2. 获取元素的内部HTML

let element = document.getElementById('myElement');
let innerHTML = element.innerHTML;
console.log(innerHTML); // 输出元素的内部HTML

九、使用`textContent`获取文本内容

textContent属性用于获取和设置元素的文本内容。与innerHTML不同，textContent不会解析HTML标签。

let element = document.getElementById('myElement');
let textContent = element.textContent;
console.log(textContent); // 输出元素的文本内容

十、获取和操作布尔属性

某些属性（例如checked、disabled、readonly等）是布尔属性。我们可以直接访问这些属性来获取它们的值。

1. 获取布尔属性

let inputElement = document.getElementById('myCheckbox');
let isChecked = inputElement.checked;
console.log(isChecked); // 输出true或false

2. 设置布尔属性

let inputElement = document.getElementById('myCheckbox');
inputElement.checked = true;
console.log(inputElement.checked); // 输出true

综上所述，JavaScript提供了多种方法来获取和操作HTML元素的属性。通过灵活运用这些方法，我们可以轻松实现各种动态网页效果。在实际开发中，根据具体需求选择合适的方法，可以提高代码的可读性和维护性。