以下是 Element 接口的一些常见属性和方法：
属性：
1. tagName: 表示元素的标签名，以大写形式返回。
2. nodeName: 对于元素节点，nodeName 与 tagName 相同。
3. nodeType: 对于元素节点，nodeType 为 Node.ELEMENT_NODE。
4. nodeValue: 对于元素节点，nodeValue 为 null。
5. attributes: 表示元素的属性列表，是一个 NamedNodeMap。
6. parentNode: 表示元素的父节点。
7. childNodes: 表示元素的子节点的 NodeList。
8. firstChild: 表示元素的第一个子节点。
9. lastChild: 表示元素的最后一个子节点。
10. previousSibling: 表示元素的前一个兄弟节点。
11. nextSibling: 表示元素的下一个兄弟节点。
12. innerHTML: 表示或设置元素的HTML内容，包括子元素。
13. textContent: 表示或设置元素及其所有后代节点的文本内容。
方法：
1. getAttribute(name): 获取元素指定属性的值。
2. setAttribute(name, value): 设置或添加元素的属性。
3. removeAttribute(name): 移除元素指定的属性。
4. hasAttribute(name): 检查元素是否具有指定的属性。
5. appendChild(node): 将节点添加为元素的子节点。
6. removeChild(node): 从元素中移除指定的子节点。
7. replaceChild(newNode, oldNode): 用 newNode 替换元素中的 oldNode。
8. cloneNode(deep): 创建元素的副本。如果 deep 为 true，则克隆元素及其所有子节点；如果 deep 为 false，则只克隆元素本身。
9. getElementsByTagName(tagName): 获取元素的指定标签名的子元素列表。
10. getElementsByClassName(className): 获取元素的指定类名的子元素列表。
11. querySelector(selector): 获取元素的符合指定选择器的第一个子元素。
12. querySelectorAll(selector): 获取元素的符合指定选择器的所有子元素列表。
以下是一个简单的示例，演示如何使用 Element 接口的一些属性和方法：
// 获取文档中的元素
var element = document.getElementById("exampleId");
// 访问元素的属性
console.log("Tag Name: " + element.tagName);
console.log("Attributes: " + element.attributes.length);
// 修改元素的内容
element.innerHTML = "New Content";
// 添加新的属性
element.setAttribute("data-custom", "custom-value");
// 获取元素的子节点
var childNodes = element.childNodes;
for (var i = 0; i < childNodes.length; i++) {
console.log("Child Node: " + childNodes[i].nodeName);
}
// 移除属性
element.removeAttribute("data-custom");
在这个例子中，首先通过 document.getElementById 获取文档中的一个元素。然后，通过访问元素的属性、修改元素的内容、添加新属性、获取子节点等操作演示了 Element 接口的使用。
转载请注明出处：http://www.zyzy.cn/article/detail/14583/XML DOM