DOM
发布于 5 年前 作者 weishen 1437 次浏览 来自 分享

DOM

理解包含不同层次节点的DOM
使用不同的节点类型
克服浏览器兼容性问题以及各种陷阱

DOM描绘了一个层次化的节点数，允许开发人员添加 移除 修改页面的一部分

1.1 节点层次

DOM可以将HTML或XML描绘成一个多层节点构成的结构。
节点拥有不同的类型，每种类型表示文档中不同的信息，每个节点拥有各自的特点，数据和方法，另外与其他节点也存在某种关系。
总共有12种节点类型。

1.1.1 Node类型

DOM1级定义了一个Node接口，该接口将由DOM中所有节点类型实现。
js中的所有节点类型都继承自Node类型，因此所有节点类型都享有共同的属性和方法。
每个节点都有一个 nodeType属性 ，用于表明节点的类型。

比较nodeType 和 Node.ELEMENT_NODE 常量 如果二者相等 则意味着taobao确实是一个元素

<div id="taobao">taobao</div>

console.log(Node.ELEMENT_NODE) // 1
console.log(Node.ATTRIBUTE_NODE)  // 2
console.log(Node.TEXT_NODE) // 3
console.log(Node.CDATA_SECTION_NODE) // 4
console.log(Node.ENTITY_REFERENCE_NODE) //5
console.log(Node.ENTITY_NODE) //6
console.log(Node.PROCESSING_INSTRUCTION_NODE) //7
console.log(Node.COMMENT_NODE) // 8
console.log(Node.DOCUMENT_NODE) //9
console.log(Node.DOCUMENT_TYPE_NODE)//10
console.log(Node.DOCUMENT_FRAGMENT_NODE) //11
console.log(Node.NOTATION_NODE) //12

let taobao = document.getElementById("taobao")
console.log(taobao.nodeType) // 1

if(taobao.nodeType == Node.ELEMENT_NODE){
    console.log('taobao is an ELEMENT')
}
  1. nodeName 和 nodeValue属性

对于元素节点
nodeName 中保存的始终都是元素标签名
nodeValue始终都是null

console.log(taobao.nodeValue)  // null
console.log(taobao.nodeName) // 元素的标签名   DIV
  1. 节点关系
    每个节点都有一个childNodes属性，其中保存着NodeList对象，NodeList是一个类数组对象。
    访问NodeList中的节点，可以通过方括号，也可以通过item()
let all = document.getElementById("all")
console.log(all.childNodes) // 其中保存着NodeList对象，NodeList是一个类数组对象。
console.log(all.childNodes.length)

console.log(all.childNodes[1]) // 方括号和item(效果一样)
console.log(all.childNodes.item(1))

父节点 parentNode
兄弟节点 previousSibling nextSibling
第一个孩子节点
最后一个孩子节点

console.log(taobao.parentNode) // 父亲节点
console.log(taobao.previousSibling)  // 上一个兄弟节点
console.log(taobao.nextSibling)      // 下一个兄弟节点

console.log(all.childNodes[0]) //第一个孩子节点
console.log(all.firstChild)    // 第一个孩子节点

console.log(all.childNodes[all.childNodes.length - 1]) // 最后一个孩子节点
console.log(all.lastChild)  //最后一个孩子节点
  1. 操作节点
    appendChild()
    在childNodes末尾添加一个节点，返回新增的节点。如果传入到appendChild()中的节点已经是文档的一部分了，那会将该节点移到新位置
    insertBefore()
    传入两个参数，要插入的节点，作为参照的节点。插入节点后，被插入的节点会变成参照节点的一个preciousSiblings节点
    如果参照节点是null，那么效果和appendChild()一样
    replaceChild()
    传入两个参数，要插入的节点和要替换的节点
    removeChild()
    只接一个参数，要移除的节点
    上面四个方法操作的都是某个节点的子节点，所以必须先取得父节点
// 操作节点
let all = document.getElementById("all")
let xianyu = document.getElementById("xianyu")
let tianmao = document.getElementById("tianmao")

all.appendChild(tianmao)
all.insertBefore(tianmao , xianyu)
all.replaceChild(tianmao , xianyu)
all.removeChild(tianmao)
  1. 其他方法
    cloneNode()
    接受一个布尔值，表示是否深复制
    true 深复制 会赋值整个节点以及其子节点数
    false 浅赋值，只复制节点本身
let anotherXianyu = xianyu.cloneNode(true); // 深复制
let anotherXianyu1 = xianyu.cloneNode(false); // 浅复制

console.log(anotherXianyu)
console.log(anotherXianyu1)

1.1.2 Document类型

回到顶部