JavaScript--DOM

一、DOM的概述

1、文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。
2、DOM 现在是真正跨平台、语言无关的表示和操作网页
的方式。

二、DOM的结构

当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一 个树状结构（DOM Tree）。

image.png

上图中的每一个方框是文档的一个节点，它表示一个Node对象，而所有节点组成了节点树（DOM树）。

三、document 文档对象

1、选取文档元素

1.1 用指定ID选取元素

任何HTML元素都可以有一个id元素，但在文档中该值必须唯一，即同一个文档中的元素不能出现有相同的ID。可以用 Document 对象的getElementById() 方法选取特定ID的元素。

<div id="div"></div> 
document.getElementById('div');

1.2 用指定名字选取元素

基于name属性的值选取HTML元素，可以使用 Document 对象的getElementsByName() 方法，返回一个NodeList对象 （类数组对象）。

<input name="input"/> 
var inputs = document.getElementsByName('input'); 
inputs[0].tagName //input

1.3 用指定标签名选取元素

Document 对象的getElementsByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素，也是返回 一个NodeList对象。

document.getElementsByTagName('span') // 选取所有span元素

扩展：给 getElementsByTagName() 传递通配符参数“*”，将获得一个代表文档中所有元素的NodeList对象。

1.4 用指定CSS类选取元素

在HTML文档和HTML元素上，我们可以调用 getElementsByClassName() 来选择指定CSS类的元素，它返回一个实时的 NodeList对象，包含文档或元素所有匹配的后代节点。

var content = document.getElementsByClassName('content') 
console.log(content); console.log(content[0]); 
//访问第一个获取的元素

getElementsByClassName() 只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成，只有当元素的 class属性值包含所有指定的标识符时才匹配。

1.5 通过CSS选择器选取元素

1）querySelectorAll()
Document 对象的方法 querySelectorAll() ，它接受一个CSS选择器的字符串参数，返回一个代表文档中匹配选择器 的所有元素的NodeList对象，并不是实时的。如果没有匹配的元素，则返回一个空的NodeList对象。

document.querySelectorAll('.div') //匹配所有class名为div的元素

2）querySelector()
原理和 querySelectorAll() 是一样的，不过它返回第一个匹配的元素（以文档 顺序），如果没有匹配的元素就返回null。

它们支持复杂的CSS选择器。

// 选中data-tip属性等于title的元素 
document.querySelectorAll('[data-tip="title"]'); 
// 选中div元素，那些class含ignore的除外 
document.querySelectorAll('div:not(.ignore)');

注意：但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。

1.6获取根节点

console.log(document.getRootNode()); //获取根节点

2、创建、插入，删除节点

2.1 创建节点

1）createElement()
创建新的Element节点可以使用Document对象的createElement()方法。给方法传递一个元素的标签名作为参数（对HTML文 档来说该标签名是不区分大小写的）。

var span = document.createElement('span')

2）createTextNode()
创建一个Text节点，参数为所要生成的文本节点的内容。

var newnode = document.createTextNode('content')

3）createAttribute()
生成一个新的属性对象节点，并返回它。参数是属性的名称。

var attr = document.createAttribute('password') 
//创建的是一个属性 默认为空值
//给属性对象赋属性值的操作 
attr.value = '123456' console.log(attr);

4）cloneNode()
用来复制已存在的节点。每个节点有一个cloneNode()方法，返回该节点的一个全新副本。传递一个可选的布尔值为参数，如果参数true则同时克隆该节点的所有后代节点，否则只克隆该节点，默认为false。

var cloneDiv = div.cloneNode() //进行元素克隆 
console.log(cloneDiv); //只会克隆自己 并不会克隆里面包含对应的内容 
var div1 = div.cloneNode(true) 
//里面是true的情况表示深度克隆 他会考虑所有的内容包括事件 
console.log(div1);

四、Element 元素对象

1、获取元素

获取元素 (document的相关方法 element也可以使用)

var element = document.getElementById('box') 
console.log(element.getElementsByTagName('img'));

2、 插入元素

我们可以用node的方法 append()、appendChild() 或 insertBefore() 来讲新节点插入到文档中。
1）append()和appendChild()
append 插入任意的子元素到对应的父元素内插入到后面，appendChild接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。

div.append("hello",content) 
//追加内容到当前元素里面的最后一个元素的后面 追加多个
parentNode.appendChild(newNode)

2）insertBefore()
用于将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。

parenNode.insertBefore(newNode,oldNode)

注意：调用上面两个方法时，如果要插入的节点是已存在文档中的，那个节点将自动从它当前的位置移除并在新的位置重新插入。

扩展：Node对象并不存在insertAfter方法，如果你要将新节点插入到该节点的后面时，可以这样写：

function insertAfter(parentNode,newNode,oldNode){ 
    if(oldNode.nextSibling){ 
        parentNode.insertBefore(newNode,oldNode.nextSibling); 
    }else{ 
        parentNode.appendChild(newNode); 
    } 
}

3、删除和替换元素

1）removeChild()
从文档树中删除一个节点。
注意：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方 法参数传递给它。

n.parentNode.removeChild(n);

2）replaceChild()
删除一个子节点并用一个新节点替换它。也是在父节点上调用该方法，第一个参数是新节点，第二个参数是需要替代的节点。

var span = document.createElement('span'); 
n.parentNode.replaceChild(span,n);

3）replaceChildren()
用一个元素来替换里面所有的子元素

div.replaceChildren("hello") //替换所有的子节点 用传入的节点替换里面所有的子节点 
var content = document.createElement('div') 
div.replaceChildren(content) //替换所有的子节点 用传入的节点替换里面所有的子节点

4、对属性的操作

1）getAttribute()

//element.getAttribute(name) 
box.setAttribute('username','tom') 
console.log(box.getAttribute('width'));
//返回对应的值 一般都是string 
console.log(box.getAttribute('username'));
//返回对应的值 一般都是string

2）setAttribute()
这个方法接收两个参数：要设置的属性名和属性的值。如果属性已经存在，则 setAttribute()会以指定的值替换原来的值；如果属性不存在，则 setAttribute()会以指定的值创建该属性。

//element.setAttribute(name,value) 
//不仅可以操作 后续定义的属性 也可以操作本身就有的属性 
var box = document.querySelector('div') 
box.setAttribute('width','100px')

注意：使用 setAttribute()方法设置的属性名会规范为小写形式，比如"ID"会变成"id"。
3）removeAttribute()
不单单是清除属性的值，而是会把整个属性完全从元素中去掉。

//element.removeAttribute(name) 
box.removeAttribute('width')

5、属性

5.1 只读属性

1）获取父元素

// 相关属性 
var div = document.getElementsByTagName('div')[0] 
// 获取父元素 
console.log(div.parentElement);//body

2）获取子元素

// 获取子元素 
console.log(div.childElementCount); 
//子元素个数 
console.log(div.children); //获取子元素 （伪数组）

3）获取兄弟元素

// 获取兄弟元素 
// 前一个兄弟 (pre表示前面的) 
console.log(div.previousElementSibling);

// 后一个兄弟 （next表示后面） 
console.log(div.nextElementSibling)

5.2 所有元素都具备的属性

1）className

// className 获取对应的class名字 
console.log(div.className); 
div.className = 'abc'

2）id

//id 属性 获取对应的id 
console.log(div.id); //空值 
div.id = "box"

3）style

//元素的其他属性 所有元素都有的属性 
console.log(div.style); //相当于获取div里面style属性 内嵌样式 对象（只能读取style里面设 置的） 
console.log(div.style.width); //style里面设置的 100px 
console.log(div.style.height); //"" 不是style属性设置的不能读取 
// 可写的属性 style的用户 element.style.样式名 赋值就是给设置 不赋值就是获取 
div.style.backgroundColor = 'red'

4）title

//title 标题 
console.log(div.title); 
div.title = "hello"

5）name

// name属性 
console.log(div.name)

6）tagName（只读）

//tagName 大写的字符串 只读属性 
console.log(div.tagName);

7）innerHTML 及 innerText

//innerHtml 显示的html(所有) innerText 显示的文本（所有的文本） 
console.log(div.innerHTML); console.log(div.innerText); 
div.innerHTML = "<b>hello</b>" //解析html代码的 
div.innerText = "<b>hello</b>" //不会解析html代码的

8）attributes 获取所有的属性节点 （返回的是一个NameNodeMap）

console.log(ele.attributes);//nameNodeMap 伪数组 (key:value) 迭代器 
console.log(ele.attributes.length) 
//访问 
console.log(ele.attributes[0]) //属性节点对象 
console.log(ele.attributes['href'].nodeValue) 
console.log(ele.attributes['href'].value) 
for(var key in ele.attributes){ //字符串 
        console.log(ele.attributes[key]); 
}
// nameNodeMap的方法getNameItem setNameItem removeNameItem item 
//其中一个属性对象 
console.log(ele.attributes.getNamedItem('hello')); //设置 
var attr1 = document.createAttribute('abc') //属性节点 
attr1.value = 'bca' 
ele.attributes.setNamedItem(attr1) 
//remove属性 
ele.attributes.removeNamedItem('href') 
// item 获取属性对象 
console.log(ele.attributes.item(0));

9）每个元素默认带的属性 都可以通过对应的元素直接点出来

//所有元素对于本身自带属性都直接点出来 
var input = document.querySelector('input') 
console.log(input.placeholder); 
input.placeholder = "请输入" 
console.log(input.value); 
console.log(input.type); 
var a = document.querySelector('#a') 
console.log(a.href); 
var img = document.querySelector('img') 
console.log(img.src);

六、节点操作

1、节点分类

• 元素节点 （element）
• 属性节点 （attribute）
• 文本节点 （text）

2、节点相关属性

• parentElement 父元素（只能是element）
• parentNode 父节点 （一般也是element）
• childNodes 子节点 （伪数组 （nodeList）文本节点及元素节点）
• children 子元素节点 （HTMLCollection element）
• previousElementSibling 上一个兄弟元素节点 （element 元素节点）
• previousSibling 上一个兄弟节点 （文本节点 元素节点）
• nextElementSibling下一个兄弟元素节点 （element 元素节点）
• nextSibling 下一个兄弟节点 （文本节点 元素节点）
• lastChild 最后一个子节点 （文本节点 元素节点）
• firstChild 第一子节点 （文本节点 元素节点）

注意：一般形式下 只有删了空文本节点才进行第一个和最后一个的获取。空文本空格换行及制表符都是空文本节点。

var ul = document.querySelector('ul') 
for(var i=0;i<ul.childNodes.length;i++){
         if(ul.childNodes[i].nodeType == 3 && /^\s+$/.test(ul.childNodes[i].nodeValue)){ 
                //删除子节点 
                ul.removeChild(ul.childNodes[i]) 
        } 
}
console.log(document.querySelector('ul').firstChild); 
console.log(document.querySelector('ul').lastChild);

3、节点分类的区分属性

• nodeType 节点类型 （1表示元素节点 2表示属性节点 3表示文本节点）
• nodeValue 节点值 （元素节点的节点值获取不到（null） 属性节点的节点值 属性值 文本节点 文本内
  容）

• nodeName 节点名 （元素节点的节点就是标签名 属性节点的节点名就是属性名 文本节点 #text）

  
  image.png

var tagA = document.createElement('a') //元素节点 
tagA.innerHTML = "hello" 
var attr = document.createAttribute('name') //属性节点 
attr.value = '张三' 
var text = document.createTextNode('你好') //文本节点 
//nodeName 节点名 元素的节点名是大写的 属性节点节点名小写 文本节点都是#text （只读属性） 
console.log(tagA.nodeName,attr.nodeName,text.nodeName);// A name #text 
console.log(tagA.nodeType,attr.nodeType,text.nodeType);// 1 2 3 
console.log(tagA.nodeValue,attr.nodeValue,text.nodeValue);// null 张三 你好

4、相关的方法

• cloneNode 方法 （克隆所有节点）
• append 添加节点
• appendChild 添加节点
• replaceChild 替换节点
• replaceChildren 替换所有的子节点
• insertBefore 插入节点
• removeChild 移除子节点

5、属性节点操作的相关方法

• setAttributeNode 设置属性节点
• getAttributeNode 获取属性节点
• removeAttributeNode 删除属性节点

//setAttributeNode getAttributeNode removeAttributeNode 
console.log(ele.getAttributeNode('abc')); //返回属性节点对象 
var attr2 = document.createAttribute('abc') //属性节点 
attr2.value = '123456' 
ele.setAttributeNode(attr2) //同样的属性名会被覆盖 
var attr3 = document.createAttribute('abc') //属性节点 
attr3.value = '123456' 
//由于attr3和attr2不是一个对象 所有他的地址不一样 所以比对不成功所 以不能被删除 
// var attr3 = attr2 //attr3的地址和attr2的是一样这个时候就可以删除了 
ele.removeAttributeNode(attr3) //删除对于的属性节点

七、this 调用者是谁就指向谁

//生成对应的元素 加入某个地方 //个数 标签名 父元素 
var arr = [0,1,2,3,4,5,6,7,8,9,'+',"-","*",'/'] 
function initElement(tagName,parent,valueArr){ 
        for(var i=0;i<valueArr.length;i++){ 
                var element = document.createElement(tagName)       
                element.innerText = valueArr[i]   
                parent.appendChild(element) 
        } 
}
var box = document.querySelector('div') 
initElement('button',box,arr) //dom操作会影响页面的渲染速度（重复多次的渲染）（重绘和回流） 
//获取所有的按钮 
var btns = document.querySelectorAll('button') 
//遍历这个按钮组 
for(var i=0;i<btns.length;i++){ 
        btns[i].onclick = function(){ 
        // console.log(i); 14 
        // console.log(btns[i].innerText); 
        console.log(this.innerText); //指向对应的点击的按钮 
        } 
}
//点击事件是异步 先走同步 再走异步