DOM的概念

DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML-页面结构 css-页面样式 javascript–页面行为操作

DOM节点的组成

DOM节点分为三种: 元素节点, 属性节点和文本节点

//   元素节点  属性节点  文本节点
       <div class="box">你好</div>
// <元素节点 属性节点>文本节点</元素节点>

用nodeType查看节点类型时，1代表元素节点，2代表属性节点，3代表文本节点。

获取DOM节点

1. document.getElementById()

通过id属性值获取节点，找到相应的元素则返回该元素的元素节点对象，如果不存在，则返回 null。

<div id="box1">文本内容1</div>
<div id="box2">文本内容2</div>

var box=document.getElementById("box1");//id名
box.style.backgroundColor="pink";//更改div的背景颜色

2. document.getElementsByClassName()

通过class名称获取元素节点对象(IE9+以上)，返回一个数组HTMLCollection(NodeList)。

<div class="box">文本内容1</div>
<div class="box">文本内容2</div>

var box=document.getElementsByClassName("box");//类名
box[0].style.backgroundColor="pink";//更改第一个类名为box的背景颜色

3. document.getElementsByTagName()

方法将返回一个数组HTMLCollection(NodeList)，这个数组保存着所有相同标签名的节点列表。

<div>文本内容1</div>
<div>文本内容2</div>

var box=document.getElementsByTagName("div");//标签名
box[0].style.backgroundColor="pink";//更改第一个div标签的背景颜色

4. document.getElementsByName()

方法可以获取相同名称(name)的元素，返回一个数组 HTMLCollection(NodeList)。

<div name="box">文本内容1</div>
<div name="box">文本内容2</div>

var box=document.getElementsByName("box");//name属性值
box[0].style.backgroundColor="pink";//更改第一个name属性值为box的背景颜色

5. document.querySelector()

单个元素选择，支持id选择器、class选择器、属性选择器、后代选择器、子代选择器等各种选择器写法。

<div id="mId">文本内容1</div>
<div class="mc">文本内容2</div>
<div class="mc">文本内容3</div>
<div name="mn">文本内容4</div>
<div name="mn">文本内容5</div>

//支持id选择
var boxId=document.querySelector("#mId");
boxId.style.backgroundColor="gold"
//支持class选择
var boxClass=document.querySelector(".mc");//只会选择单个，有相同类名选择第一个
boxClass.style.backgroundColor="white"
//支持name选择
var boxName=document.querySelector("[name='mn']");//只会选择单个，有相同的name属性只会选择第一个
boxName.style.backgroundColor="orange"
//支持标签选择
var boxTag=document.querySelector("div");//只会选择单个，第一个div标签
boxTag.style.color="#fff"

6. document.querySelectorAll()

多个元素选择，支持id选择器、class选择器、属性选择器、后代选择器、子代选择器等各种选择器写法。

<ul>
    <li>121214</li>
    <li>121214</li>
    <li>121214</li>
</ul>
<ol>
    <li>44444</li>
    <li>44444</li>
    <li>44444</li>
</ol>

var oListLi=document.querySelectorAll("ul li");//后代选择器 仅选择ul下的后代li元素
oListLi.forEach(function(item){//querySelectorAll支持forEach遍历方法
    item.style.backgroundColor="yellowgreen"//改变li的背景颜色
})

DOM属性节点

attributes属性: 获取某元素节点的所有属性节点(返回一个数组)。
我们通过三个函数可以操作元素的属性:
getAttribute(): 方法将获取元素中某个属性的值。它和直接使用点语法(.属性)获取属性值的方法有一定区别。
setAttribute(): 方法可以给元素添加属性; 如果属性已经存在, 则会覆盖原来的属性; 需要传入两个参数：属性名和属性值。
removeAttribute(): 方法可以移除元素的属性。

DOM节点间关系

childNodes: 子节点集合。
firstElementChild || firstChild: 用于获取当前元素节点的第一个子节点，相当于childNodes[0]。
lastElementChild || lastChild: 用于获取当前元素节点的最后一个子节点, 相当于 childNodes[box.childNodes.length-1]。
parentNode: 属性返回该节点的父节点。
previousElementSibling || previousSibling: 属性返回该节点的前一个同级节点。
nextElementSibling || nextSibling: 属性返回该节点的后一个同级节点。

DOM节点操作

createElement(): 创建一个元素节点
appendChild(): 添加一个新子节点到子节点的末尾
createTextNode(): 创建一个文本节点
insertBefore(): 将新节点插入到某节点前面
replaceChild(): 将新节点替换旧节点
cloneNode(): 复制节点,参数为true表示深克隆，参数为false表示浅克隆。
removeChild(): 移除节点

三大家族

offsetParent 找带有就近定位的父元素，如果父级们都没有定位，默认找body 返回的是dom对象。
offsetLeft和offsetTop 获取当前元素到带有定位父元素的距离，默认到body的距离返回数值。
offsetWidth和offsetHeight 获取自身元素的宽与高 = 自身宽高+padding+border 返回数值。