结构属性
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