HTML DOM(文档对象模型)提供了一些属性,用于访问和操作文档的元素。这些属性涵盖了元素的结构、样式、内容和其他相关信息。以下是一些常见的HTML DOM属性:

结构属性

1. parentNode: 获取一个元素的父节点。
   var parent = element.parentNode;

2. childNodes: 获取一个元素的所有子节点。
   var children = element.childNodes;

3. firstChild: 获取一个元素的第一个子节点。
   var firstChild = element.firstChild;

4. lastChild: 获取一个元素的最后一个子节点。
   var lastChild = element.lastChild;

5. nextSibling: 获取一个元素的下一个兄弟节点。
   var nextSibling = element.nextSibling;

6. previousSibling: 获取一个元素的上一个兄弟节点。
   var previousSibling = element.previousSibling;

属性操作

7. getAttribute(name): 获取元素的指定属性值。
   var value = element.getAttribute("attributeName");

8. setAttribute(name, value): 设置元素的指定属性值。
   element.setAttribute("attributeName", "newValue");

9. removeAttribute(name): 移除元素的指定属性。
   element.removeAttribute("attributeName");

样式属性

10. style: 获取或设置元素的内联样式。
    var elementStyle = element.style;
    element.style.color = "red";

尺寸和位置属性

11. offsetWidth、offsetHeight: 获取元素的宽度和高度,包括边框和内边距。
    var width = element.offsetWidth;
    var height = element.offsetHeight;

12. clientWidth、clientHeight: 获取元素的宽度和高度,不包括边框和内边距。
    var width = element.clientWidth;
    var height = element.clientHeight;

13. offsetTop、offsetLeft: 获取元素相对于其 offsetParent 元素的顶部和左侧位置。
    var top = element.offsetTop;
    var left = element.offsetLeft;

内容属性

14. innerHTML: 获取或设置元素的HTML内容。
    var htmlContent = element.innerHTML;
    element.innerHTML = "<p>New content</p>";

15. innerText、textContent: 获取或设置元素的文本内容。
    var textContent = element.textContent || element.innerText;
    element.textContent = "New text content";

这些属性允许你访问和操作文档中的元素,使你能够根据需要动态地更改文档的结构、样式和内容。在实际应用中,你可以根据具体需求使用这些属性,以实现所需的效果。


转载请注明出处:http://www.zyzy.cn/article/detail/4351/HTML