掌握HTML DOM中元素对象的常用方法和属性

HTML DOM中元素对象的常用方法和属性

HTML DOM中的元素对象包括文档，元素，属性，文本和注释等。它们可以通过JavaScript来操作，实现对HTML文档的操作与控制。

元素对象的常用属性有id，title，className，style，innerHTML，outerHTML，parentNode，childNodes，firstChild，lastChild，nextSibling，previousSibling，attributes等。

元素对象的常用方法有getElementById()，getElementsByTagName()，getElementsByClassName()，querySelector()，querySelectorAll()，appendChild()，removeChild()，replaceChild()，createElement()，createTextNode()，cloneNode()，hasAttribute()，getAttribute()，setAttribute()，removeAttribute()等。

// 使用getElementById()方法获取元素
let element = document.getElementById('id');

// 使用getElementsByTagName()方法获取元素
let elements = document.getElementsByTagName('p');

// 使用getElementsByClassName()方法获取元素
let elements = document.getElementsByClassName('className');

// 使用querySelector()方法获取元素
let element = document.querySelector('#id');

// 使用querySelectorAll()方法获取元素
let elements = document.querySelectorAll('p');

// 使用appendChild()方法添加元素
let element = document.createElement('div');
let parentElement = document.getElementById('parent');
parentElement.appendChild(element);

// 使用removeChild()方法删除元素
let element = document.getElementById('id');
let parentElement = element.parentNode;
parentElement.removeChild(element);

// 使用replaceChild()方法替换元素
let oldElement = document.getElementById('old');
let newElement = document.createElement('div');
let parentElement = oldElement.parentNode;
parentElement.replaceChild(newElement, oldElement);

// 使用createElement()方法创建元素
let element = document.createElement('div');

// 使用createTextNode()方法创建文本节点
let textNode = document.createTextNode('text');

// 使用cloneNode()方法复制元素
let element = document.getElementById('id');
let cloneElement = element.cloneNode(true);

// 使用hasAttribute()方法检查元素是否有指定属性
let element = document.getElementById('id');
let hasAttribute = element.hasAttribute('title');

// 使用getAttribute()方法获取元素属性值
let element = document.getElementById('id');
let attributeValue = element.getAttribute('title');

// 使用setAttribute()方法设置元素属性值
let element = document.getElementById('id');
element.setAttribute('title', 'value');

// 使用removeAttribute()方法删除元素属性
let element = document.getElementById('id');
element.removeAttribute('title');

以上就是HTML DOM中元素对象的常用方法和属性，它们的使用可以帮助我们更加高效地操作HTML文档，实现对HTML文档的控制。