DOM介绍

一、DOM的概念

DOM是文档对象模型(Document Object Model)的简称，它是W3C的标准。DOM是中立煜平台和语言的接口，它允许程序和脚本动态访问和更新文档的内容、结构和样式。

二、文档对象

1、获取全局内容

根据CSS选择器来获取DOM元素【重点】

document.querySeletor() //返回选择器匹配的第一个元素，是一个HTMLElement对象，如果没有匹配到返回null
document.querySeletorAll() //根据选择器进行获取，返回的是NodeList伪数组
伪数组：有部分数组的属性，包括有长度和索引，但是没有pop()、push()等数组方法。

根据其他属性获取DOM元素

document.getElementById() //根据id属性获取一个元素，返回的是一个伪数组
document.getElementsByTagName() //根据标签名获取元素，返回的是一个伪数组
document.getElementsByClassName() //根据class属性名来获取元素，返回的是一个伪数组
document.getElementsByName() //根据name属性获取元素，返回的是一个伪数组

2、创建全局内容

document.createElement() //返回的是一个元素

var p = document.createElement('p') //传入的是一个对应的标签名
console.log(p); 

document.createAttribute() //返回一个属性对象

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

document.createTextNode() //返回一个文本节点

var text = document.createTextNode('显示内容') //创建一个文本节点对象
console.log(text);

三、元素对象

1、获取元素

除了document的相关方法能获取，element方法也可以获取

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

2、替换元素

replaceChild ：用一个新的元素来替换里面的子元素
replaceChildren ：用一个元素来替换里面所有的子元素

div.replaceChildren("hello") //替换所有的子节点 用传入的节点替换里面所有的子节点
var content = document.createElement('div')
div.replaceChildren(content) //替换所有的子节点 用传入的节点替换里面所有的子节点
//replaceChild 用前面的替代后面的（一定是属于我们本身的儿子元素）
var a = document.createElement('a')
div.replaceChild(a,div.children[0]) //使用新的节点来替换对应的子节点 使用a这个元素来替代对应的content这个子元素

3、插入元素

append ：插入任意的子元素到对应的父元素内 插入到后面
appendChild ：插入一个子元素到对应的父元素内容 插入到后面
insertBefore ：插入一个元素到另一个子元素的前面

// 插入元素 append inster
div.append("hello",content) //追加内容到当前元素里面的最后一个元素的后面  追加多个
// appendChild 追加子元素
var b= document.createElement('b')
div.appendChild(content) //追一个元素在当前元素的里面 （同一个元素只能允许加一次 里面存在是不可以添加的）
div.appendChild(b) //追一个元素在当前元素的里面 
//insertBefore
var span = document.createElement('span')
//参数1 当前需要插入的元素  参数2 对应的子元素
div.insertBefore(span,div.children[0]) //插入到哪个子元素的前面

4、删除元素

div.remove() //全部删除 包括自己

5、cloneNode()

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

四、属性

1、只读属性

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

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

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

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

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属性。相当于获取div里面style属性

console.log(div.style); 
console.log(div.style.width); //style里面设置的 100px
console.log(div.style.height); //"" 不是style属性设置的不能读取
// 可写的属性 style的用户 element.style.样式名 赋值就是给设置 不赋值就是获取
div.style.backgroundColor = 'red'

（4）title属性。

console.log(div.title);
div.title = "hello"

（5）name属性。
（6）tagName属性。
（7）innerHTML 及 innerText属性。innerHtml 显示的html所有的内容，并且会解析html代码，而innerText 显示的是所有的文本，不能解析html代码。

console.log(div.innerHTML);
console.log(div.innerText); 
div.innerHTML = "<b>hello</b>" //解析html代码的
div.innerText = "<b>hello</b>" //不会解析html代码的

3、属性节点的属性

attributes属性: 获取某元素节点的所有属性节点(返回一个数组)
我们通过三个函数可以操作元素的属性:

• getAttribute(): 通过属性名获取对应的属性值
• setAttribute(): 设置一个key-value形式的属性键值对
• removeAttribute(): 移除指定的属性
  getAttribute()方法将获取元素中某个属性的值。它和直接使用点语法(.属性)获取属性值的方法有一定区别。

document.getElementById(‘box’).getAttribute(‘id’);  获取元素的id属性值 document.getElementById(‘box’).id;  获取元素的id属性值(点语法)

setAttribute()方法可以给元素添加属性; 如果属性已经存在, 则会覆盖原来的属性; 需要传入两个参数：属性名和属性值。

//设置属性和值
document.getElementById(‘box’).setAttribute(‘align’, ‘center’); 
//设置自定义的属性和值
document.getElementById(‘box’).setAttribute(‘bbb’, ‘ccc’); 

removeAttribute()方法可以移除元素的属性。

 document.getElementById('box').removeAttribute('style');  

4、元素节点间关系的相关属性

• childNodes: 子节点集合
• firstChild: 用于获取当前元素节点的第一个子节点，相当于childNodes[0]；
• lastChild: 用于获取当前元素节点的最后一个子节点

5、节点分类的区分属性

nodeType 节点类型 （1表示元素节点 2表示属性节点 3表示文本节点）
nodeValue 节点值 （元素节点的节点值获取不到（null） 属性节点的节点值 属性值 文本节点 文本内容）
nodeName 节点名 （元素节点的节点就是标签名 属性节点的节点名就是属性名 文本节点 #text）

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  张三  你好