DOM 学习总结

DOM学习总结

表现为树状结构. 类型:

• Node
• Element
• Text
• Document

Node 方法与属性

这个主要是关注对树的操作

• 查找document.getElementById
• 遍历通过firstChild,lastChild,nextSibling,ChildNodes
• 插入appendElement,insertBefore
• 复制cloneNode

注意 最后一个节点是没有nextSibling的

遍历子节点方法

假设 node 为节点

1:
for(var i = 0;i < node.childNodes.length;i++ ){
//   do something

}

2:
var i = node.firstChild
while (true){
//do something
    i = i.nextSibling
    if (i == node.firstChild or i == null){
        break;
    }
}

遍历相近节点

全局变量

document是HTMLDocument的一个实例,是表示整个HTML页面.

document

来求element的方法

• getElementbyID 单个对象
• getElementbyName HTMLCollection
• getElementbyTagName HTMLCollection

HTMLCollection的一些技巧 先求出来,然后再根据namedItem取一个一个,简化 collect[name]这样. 遍历 for (var i=0;i < collect.length;i++)这样

document的一些常用 HTMLColletcion

• images 返回页面全部图片的元素.
• links 包含所有a的href的元素. 可利用这个属性把这个链接进一步处理.

标签定义超链接，用于从一张页面链接到另一张页面。 元素最重要的属性是 href 属性，它指示链接的目标。

HTMLCollection 一般情况下是动态类型,是指向真实的,不是复制的.

element

element -> HTMLElement html元素 classname,id, …