DOM

DOM

概述：DOM全称是文档对象模型（文档指定为对应的html文档），对应的DOM就是操作HTML文档的

1.根对象 document（文档对象）

2.元素对象 Element （所有的标签都是元素）

3.Attribute属性对象（所有的标签里面的属性都是属性对象）

4.Text文本对象 （全局所有的文本都属于文本对象）

document文档对象

方法

1. 获取全局的内容

   document.getElementById()
   //通过id属性获取元素，返回的是一个元素（Element）
   document.getElementsByClassName() 
   //通过class属性获取元素 返回的是一个伪数组（HTML Collection）
   document.getElementsByTagName()
   //通过标签名获取元素  返回的是一个伪数组（HTML Collection）
   document.getElementsByName() 
   //通过name属性名获取元素  返回的是一个伪数组（NodeList）
   document.querySeletorAll() 
   //通过对应的选择器进行获取   返回的是一个伪数组（NodeList）
   document.querySeletor()
   //通过选择器获取第一个查找到的元素 返回的是第一个查找到的元素（Element）
   document.getRootNode()
   //获取根节点
   ​

2. 创建全局的内容

   创建元素节点document.createElement() 返回的是一个元素

   创建属性节点document.createAttribute() 返回的是一个属性对象 默认为空值

   给创建的这个属性赋值 document.createAttribute().value= ‘ ‘

   创建文本节点document.createTextNode() 返回的是一个文本节点对象(object)

3. 删除全局的内容

HTMLCollection 与 NodeList 的相同与区别

[HTMLCollection]是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

属性

document.head 获取head标签

document.body 获取body标签

document.forms 获取表单标签

document.rootElement 获取根元素

Element元素对象

方法

1. 获取元素

   document的相关方法element可以用

2. 替换元素（replace）

   element.replaceChildren(‘ ‘)用传入的节点替换里面所有的子节点

   element.replaceChild( a， b）使用 新的节点a替换对应的子节点b(b一定得是子节点，不然会报错）

   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 insert) 插入对应的子元素

   element.append(‘ ‘ , ‘ ‘ ) 追加多个子节点

   element.appendChild() 只能写入一个参数 当写入的为已经存在的子节点时会将该子节点放到最后

   element.insertBefore( , ) 参数1为需要插入的元素 参数2为原本有的子元素

   // 插入元素 append insert
   var content = document.createElement('div')
   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. 删除元素(remove)

   element.remove() 全部删除 会删除自身

   清空所有的内容 replaceChildren(‘ ‘)

5. cloneNode方法

   进行元素克隆

   cloneNode() 只会克隆自己，并不会克隆

   cloneNode(true） 里面是true时 会克隆所有的内容 包括事件

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

    

6. 对于属性的操作方法

   （不仅可以操作后续定义的属性，也可以操作本身就有的属性）

   setAttribute

   var box = document.querySelector('div')
   box.setAttribute('width','100px')
   box.setAttribute('username','tom')

   getAttribute 返回对应的值 一般都是string类型

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

   removeAttribute

属性

只读属性

获取父元素

element.parentElement

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

获取子元素

element.childrenElementCount（子元素个数）

element.children 获取子元素（返回的是伪数组）

获取兄弟元素

都获取的是元素节点，不是文本节点

element.previousElementSibling 前一个兄弟元素

element.nextElementSibling 后一个兄弟元素

替换

element.replaceChildren(‘ ‘)用传入的节点替换里面所有的子节点

element.replaceChild( a， b）使用 新的节点a替换对应的子节点b(b一定得是子节点，不然会报错）

所有的元素都具备的属性

element.style

element.className

element.id

element.tagName （输出为大写，为只读属性）

element.title标题

element.name

innerHTML 显示的是html（所有的内容包括标签）解析html代码

innerText 显示的是文本 不会解析html代码

element.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));

所有元素对于本身自带的属性都能直接使用点方法

例如a标签的hre属性 input的value属性

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);

nameNodeMap 的四个方法：

getNameItem setNameItem removeNameItem Item

节点操作

节点分类

元素节点 element

属性节点 attribute

文本节点 text

节点相关属性

parentElement 父元素 获取的是元素节点和文本节点

parentNode 父节点 获取的是元素节点和文本节点

childNodes 子节点 空格以及回车都算子节点 不会包含属性节点（元素和文本）

children 子元素节点 （HTMLCollection element）

previousElementSibling 上一个兄弟元素节点（element元素节点）

previoustSibling 上一个兄弟节点 （文本节点 元素节点）

nextElementSibling 下一个兄弟元素节点 （element 元素节点）

nextSibling 下一个兄弟节点 （文本节点 元素节点）

firstcChild 第一个子节点（文本节点 元素节点）

lastChild 最后一个子节点（文本节点 元素节点）

一般只有删了空文本节点才进行第一个和最后一个的获取

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);

空文本 空格及换行 制表符都是空文本节点

注释节点的节点为#comment

节点分类的区分属性

nodeType 节点类型 （1-元素节点 2-属性节点 3-文本节点）

nodeValue 节点值 (null 属性值 文本内容）

nodeName 节点名称 (元素名（都是大写）属性名 （小写） #text ）

相关方法

append 添加节点

cloneNode 替换节点

appendChild 添加节点

replaceChild 替换节点

replaceChildren 替换所有的子节点

insertBefore 插入节点

removeChild 移除子节点

属性节点操作的相关方法

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); //指向对应的点击的按钮
    }
}
//点击事件是异步 先走同步 再走异步