JavaScript基础教程

第四讲

DOM

• 节点访问
• 节点操作
• document
• attribute
• 文本操作
•  文档碎片

DOM扩展

• querySelector
• 元素遍历
• 操作样式
• 计算的样式

DOM节点关系

• childNodes
• parentNode
• firstChild
• lastChild
• previousSibling
• nextSibling
• NodeList是动态的

DOM节点操作

• appendChild
• insertBefore
• replaceChild
• removeChild

Document

document是DOM节点树的根节点

一般我们用document.  来访问节点树上的节点

创建元素节点

document.createElement

• getElementById()
• getElementsByTagName()
• getElementsByClassName()
• getElementsByName()

Attribute

• getAttribute
• setAttribute
• removeAttribute

文本操作

1. innerHTML(不仅是文本)
2. innerText
3. textContent

文档碎片

document.createDocumentFragment

相当于创建一个容器，将节点放进去可以防止将节点直接插入节点树上浏览器进行渲染，

提高性能

querySelector、querySelectorAll

 

DOM扩展中的内容

更快的查询节点的方法

就是会有兼容问题

查询的参数为CSS的选择器

元素遍历

• childElementCount
• firstElementChild
• lastElementChild
• nextElementChild
• previousElementChild

访问样式

element.style.color = "red"

style的属性用驼峰式命名

计算的样式

element.style.无法访问外联样式表里的样式

此时要用计算的样式来访问

document.defaultView.getComputedStyle()

第一个参数为DOM元素，第二个是伪类，没有则是null

再访问.backgroundColor等