day08 DOM

DOM

DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。

对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。

    <div class="a"></div>
    <div id="nav"></div>
    <div class="box">xi</div>
    <ol id="ol">
        <Li>道路宽度</Li>
        <Li>阿克苏擦</Li>
        <Li>反对</Li>
        <Li>飒飒的</Li>
    </ol>  

var ol=document.getElementById('ol')
     console.log(ol.getElementsByTagName('li'));
     var firstbox=document.querySelector('.box');
     console.log(firstbox);
     var nav=document.querySelector('#nav')
     console.log(nav);
     var li=document.querySelector('li')
     console.log(li);
     var allbox=document.querySelectorAll('.box')
     console.log(allbox);
     var lis=document.querySelectorAll('li')
     console.log(lis);
     var a1=document.querySelector('.a')
     a1.innerHTML='今天天气好呀'

Element 元素对象方法

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() //全部删除 包括自己
// 清空所有的内容 使用replaceChildren('')

5.cloneNode 方法

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

节点

元素的节点名大写，属性节点小写

排序为元素节点（element），属性节点（attribute），文本节点（text）

本节点名都是#text，元素节点可以删除属性节点，反之不行

属性节点里面都是对象object，属性节点的上一个和下一个属性节点都为null

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