js是一门神奇的语言，才开始入门你可能觉得，学js难，难于上青山，但是这是一门温柔的语言，往后学久了，你会发现前行的路越来越容易，这就是今天讲DOM的意义，如果你还被各种循环和数组的结合折磨的死去活来，那么，DOM是你最好的解脱。
DOM可以从俩个方面来讲解，其一是它的对象，其二是属性，首先来谈谈对象。DOM的对象可分为“增删改查”；
增：
//创建一个新的节点:
var a = document.createTextNode("hello world!");
或者
//创建一个新的节点:
var a = document.createElement('div');
将创建的节点添加到html中，有两种方法
//将节点添加到指定地方（比如divs的子集中）
divs.appendChild(a);
注意：两个图添加的顺序都为
- innerHTML: 标签的内容，包含里面的子标签以及注释，还可以往里面加入标签的时候，可以解析加入的标签
- console.log(arguments) 参数列表，可以获取调用这个函数的时候，传过来的所有的参数，数组，
如果调用过来的不传参数，形参为undefined
例如：
1.png
](https://img.haomeiwen.com/i7426638/322cce8b74c40d39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://img.haomeiwen.com/i7426638/15d295f98ba90eda.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
appendChild添加是在末尾添加，如果同时添加多个，则按顺序排列
还有一种是在之前添加
//作为子集依次添加，每次新添加的在上面
divs.insertBefore(a,divs.children[1]);
例如：
2.png
删：有两种方法
一.
divs.removeChild(a);
二.
a.remove();
改：用一个替换原来的某个，比如，用b替换上面的a;
// 首先创建一个b节点
var b = document.createELement('div');
// 替换
divs.replaceChild(b,a);
查：就是之前的获取元素的方法
1.document.getElementById('"id"名)：根据元素的id名获取元素，只能获取到指定id名的单个元素；
2.document.getElementsByClassName('class名')：根据元素的class名获取元素，获取所有指定class名的元素，结果是一个集合，如果要从这个集合中获取某一个单个元素，可以用box_arr[ 0 ]这样的方法；
3.document.querySelector( ):找到符合选择元素的唯一条件，如果有很多符合条件的元素，只能找到第一个；
4.document.querySelectorAll( )：找到符合元素的所有元素，获取到的是一个集合
5.document.getElementsByName('name的属性值'):根据元素的name来获取元素，获取的是一个集合
6.document.getElementsByTagName('标签名')：根据标签名获取元素；
DOM对象说完了，来谈谈DOM属性吧。
刚接触js的时候，我想你们已经常用className,id,innerHTML,innerText,style几个属性，这里不再多介绍。
首先从两个方面介绍下今天所说的属性，大小（width,height) 和 位置(top,left)
//先创建一个class名为box的div
var box = document.createElement('div');
//先在css中写好.box的样式，这里使用className让box使用box的样式
box.className = "box";
//获取的是带边框的高度
var c = box.offsetHeight;
//获取的是可视高度（不包含滚动条和边框等）
var d = box.clientHeight;
//获取的是内容总高度
var e = box.scrollHeight;
width同理。
// 相对于定位父级的top值
console.log(redDiv.offsetTop);
// 上边框的距离
console.log(redDiv.clientTop);
// box滚动上去的那一部分，不能滚动的元素，scollTop一般为零
box.onclick = function(){
console.log(box.scrollTop);
}
left同理。
总结：
DOM.png
还有一种常见的属性
childNodes : 所有子节点
children : 所有是标签类型的子节点
parentNode ： 父节点
nextSibling : 下一个兄弟节点
previousSibling : 上一个兄弟节点
firstChild ： 第一个子节点
lastChild : 最后一个子节点
DOM暂时只介绍到这。
网友评论