JS DOM（2）（文档对象模型）

一.DOM模型的三种标准接口

1.Core DOM（核心DOM），适用于各种结构化文档

2.XML DOM，专用于XML文档

3.HTML DOM，专用于HTML文档

二.查看节点

 

1.通过父节点获取子节点

获取所有子节点：parent.children

第一个子节点：parent.firstElementChild

最后一个子节点：parent.lastElementChild

2.通过字节点获取父节点和兄弟节点

获取父节点：me.parentElement

上一个兄弟节点：me.previousElementSibling

下一个兄弟节点：me.nextElementSibling

三.属性操作

1.获取属性：getAttribute（"属性名"）

2.修改属性：setAttribute（"属性名"，"修改值"）

3.移除属性：removeAttribute（"属性名"）

四.节点信息

1.节点名称nodeName

元素节点：返回的是元素标签名大写 例P

文本节点：返回#text

2.节点类型nodeType

元素节点：1

文本节点：3

3.节点的值nodeValue

元素节点：none

文本节点：文本内容

五.节点操作

 1.创建节点
document.createElement(tag)

 

2.删除节点：
elem.remove()
elem.parentElment.removeChild(elem)

 

3.复制节点

复制节点 ,不带子节点
var elem2 = elem.cloneNode(false)

复制节点，带子节点
var elem3 = elem.cloneNode(true)

4.插入节点
parent.appendChild(elem)  //  将elem插入到parent最后面

 parent.insertBefore(新的节点，相关节点) //  把新的节点插入到 相关节点的前面

 

5.替换节点
parent.replaceChild(新的节点，被替换的节点)

六.表格操作

1.创建行
row = table.insertRow(index)

2.创建列
col = row.insertCell(index)

3.设置列的内容
col.innerText="xxx"

4.选择第一行
table.firstElementChild.fristElementChild

七.事件的注册

1.DOM0 在html标签中
<h1 οnclick="callMe()">

2.DOM1 实现js与html分离
btn.οnclick=callMe;
btn.onclick = function(){}
(多次注册，只会执行最后一个)

3.DOM2 可以添加多个，也可以移除
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})

4.移除全部click
btn.removeEventListenter("click")
移除一个
btn.removeEventListenter("click",callMe)