DOM的简单使用

获取元素的方法

• document.getElementById() 只会返回一个元素，因为一个页面上 id是唯一的
• document.getElementsByTagName('p') 会返回一组元素

 let allP = document.getElementsByTagName("p");
for (var i=0;i < allP.length;i++) {
        alert(allP[i].innerHTML);//像数组一样访问其中的每个元素
}

• document.getElementsByClassName()

节点基础

文档根结点

document.documentElement;

常用节点类型

• 元素节点--文档中具有标签的节点
• 文本节点--标签中不是注释的文本块

常用的节点属性

• nodeType -- 元素节点是1，文本节点是3
• nodeValue -- 元素节点为空，文本节点的文本内容
• firstChild -- 该元素节点包含的第一个子节点
• lastChild -- 该元素节点包含的最后一个子节点
• nextSibling -- 该节点的后一个兄弟节点
• previousSibling -- 该节点的前一个兄弟节点
• childNodes(NodeList) -- 子节点列表,可以通过
• hasChildNodes() (Boolean) -- 当含有子节点的时候返回真
• appendChild(node) -- 将node放在末尾
• removeChild(node) -- 移除子node
• replaceChild (newnode,oldnode) -- 将childNode中的oldnode换成新node
• insertBefore (newnode,refnode)

添加新节点

• createElement(tagname) -- 创建标签名为tagname的元素
• createDocumentFragment() -- 创建文档碎片
• createTextNode(text) -- 创建包含text内容的节点

 var p = document.createElement("p");//创建一个元素节点，传入标签名
    var txt = document.createTextNode("创建文本节点,传参数即是文本内容");
    p.appendChild(txt);//将txt所引用的文本节点插入p到p的最后面(在这里p是空的)
    //直到现在，页面不会出现任何内容，必须将创建的节点插入到文档中
    document.body.appendChild(p);//p将出现在最后