js DOM
Posted d-laowu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js DOM相关的知识，希望对你有一定的参考价值。
DOM 是 Document Object Model（文档对象模型）的缩写。（BOM 浏览器对象模型）；
任意的文档都可以绘制成树状结构
docunment就是一个对象，这个对象指代的是这个文档
document对象底下有一些方法，这些方法可以获取到某个或者某一组元素节点
1.document.getElementById(‘id‘) 通过元素的id属性，获取到这个元素（唯一的），可以直接使用
IE8及以下，获取元素id是不区分大小写的，而且还可以通过输入name属性值获取（查了下这个ie8不再支持）
2.document.getElementsByTagName(‘标签名‘) 通过标签名获取一组元素，返回的是一个类数组对象，里面封装的是所有匹配到该标签的元素，没有兼容性问题。另外：document.getElemnetsByTagName("*"),‘*’在这里指的是所有的标签
3.document.getElementsByName(‘name‘) 通过name属性来获取一组元素（返回类数组对象），老版本浏览器只有部分标签（表单元素）好使，因为在实际开发中，name属性只会添加在表单中
4.document.getElementsByClassName(‘类名‘) 通过类名来获取一组元素（返回类数组对象），IE8及一下不支持
5.document.querySelector(‘css选择器‘) 通过css选择器获取元素，返回的只有第一个匹配的元素
6.document.querySelectorAll(‘css选择器‘) 通过css选择器获取元素，返回的是封装所匹配到的元素的类数组
5，6两个方法很少用到，它们在IE7及一下不支持，并且是非实时的
另外还有： document.documentElement 获取html元素节点
document.body 获取body元素节点
document.head 获取head元素节点
实时与非实时：
div与divs都是含有所有div元素的伪数组对象（注意他们的创建方法），当伪数组中其中一个元素被删除后，div会实时更新它里面的元素，而divs不会发生任何改变，也就是document.querySelectorAll(‘css选择器‘)创建的对象是非实时的
DOM节点：
元素节点 文本节点 注释节点
解析：
<body> <div> <span></span> 这里是文本 <p></p> <!-- 一段注释 --> </div> <script type="text/javascript"> </script> </body>
var div = document.getElementsByTagName(‘div’)[0];
所有节点中查找（DOM的查询操作）
div.parentNode 查找父节点 <body>...</body>（html元素的父节点是document，在往上就是null了）
div.childNodes 查找所有的子节点（伪数组对象） NodeList(7) [text, span, text, p, text, comment, text]
div.firstChild 查找第一子节点 #text
div.lastChild 查找最后一个子节点 #text
div.previousSibling 查找上一个兄弟节点 #text
div.nextSibling 查找下一个兄弟节点 #text
元素节点中查找
div.parentElement 查找父元素节点 <body>...</body>
div.children 查找所有的子元素节点（伪数组对象） HTMLCollection(2) [span, p]
div.firstElementChild 查找第一个子元素节点 <span></span>
div.lastElementChild 查找最后一个子元素节点 <p></p>
div.previousElementSibling 查找上一个兄弟元素节点 null
div.nextElementSibling 查找下一个兄弟元素节点 <script type="text/javascript"></script>
div.childElementCount 查找所有的子元素节点的数量，作用与 div.children.length 一样 2
节点的属性：
var span = div.children[0]; <span></span>
var text = div.childNodes[2]; ‘ 这里是文本 ‘
var comment = div.childNodes[5]; <!-- 一段注释 -->
nodeName 查看节点的名字，只能读，不能修改
span.nodeName SPAN
text.nodeName #text
comment.nodeName #comment
nodeValue 修改节点中的内容
text.nodeValue = "修改后的文本"; ’修改后的文本‘
comment.nodeValue = "修改后的注释"; <!-- 修改后的注释 -->
nodeType 查看节点的类型
span.nodeType 1
text.nodeType 3
comment.nodeType 8
元素节点 返回1
属性节点 返回2
文本节点 返回3
注释节点 返回8
document 返回9
DocumentFragment文档节点碎片 返回11
判断是否含有子节点的方法 hasChildNodes()
div.hasChildNodes() true
span.hasChildNodes() false
DOM的继承
万物皆为对象，document也是对象，我们获取的DOM元素也是对象，那这些对象都是由谁创建（new）的呢？
参照下图，图上的可以全部看作是构造函数，只是这些构造函数不是给我们使用的，它是给系统使用（new）的；
例1： document = new HTMLDocument； --> 根据原型链： document.__proto__ === HTMLDocument.prototype
HTMLDocument.prototype = new Document(); --> HTMLDocument.prototype.__proto__ === Document.prototype
Document.prototype = new Node(); --> Document.prototype.__proto__ === Node.prototype
也就是说 Node.prototype，Document.prototype，HTMLDocument.prototype里面的属性和方法都被document继承了
例2：var body = document.body；
body = new HTMLBodyElement() body.__proto__ === HTMLBodyElement.prototype
HTMLBodyElement.prototype = new HTMLElement() HTMLBodyElement.prototype.__proto__ === HTMLElement.prototype
HTMLElement.prototype = new Element() HTMLElement.prototype.__proto__ === Element.prototype
Element.prototype =new Node(); Element.prototype.__proto__ === Node.prototype
body元素继承了 Node.prototype，Element.prototype， HTMLElement.prototype，HTMLBodyElement.prototype 的属性和方法
在Node前面还有个EventTarget；图片上没有写出来，也就是 Node.prototype.__proto__ === EventTarget.prototype
此时EventTarget.prototype.__proto__ 就到了原型链的尽头Object.prototype
一些常用的dom方法存放的位置：
1.getElementById() 定义Dcoument.prototype上面，所以document可以使用
2.getElementsByName() 定义Dcoument.prototype上面，document可以使用
3.getElementsByTagName(),getElementsByClassName(),querySelector(),querySelectorAll() 这几个方法定义Dcoument.prototype和Element.prototype上面，document可以使用，标签元素也可以使用
4.body和head属性 定义在HTMLDocument.prototype上面，document可以使用
5.documentElement属性 定义在Dcoument.prototype上面，document可以使用
DOM操作（增删改查）
创建节点：
1.document.createElement("标签名") 创建元素节点
var div = document.createElement("div") //<div></div>
2.document.createTextNode("文本") 创建文本节点
var text = document.createTextNode("这是新创建的文本") //"这是新创建的文本"
3.document.createComment("注释") 创建注释节点
var comment = document.createComment("新创建的注释") //<!-- 新创建的注释 -->
4.document.createDocumentFragment() 创建文档碎片节点
插入节点：
1.a.appendChild(b) 将a作为父级元素，将b作为它的最后一个子元素插入。若b为页面的已有元素，则为剪贴操作
var div = document.getElementsByTagName(‘div‘)[0];
var p = document.getElementsByTagName(‘p‘)[0];
div.appendChild(p)
2.a.insertBefore(b,c) 将c作为父级元素，将b放在c的前面
var span = document.getElementsByTagName(‘span‘)[0];
div.insertBefore(p,span)
删除节点：
1.a.removeChild(b) 删除a里面的b节点，它本身返回的也是b节点，只是将b节点从页面中删除了，js里还是存在的
2.a.remove() 删除a节点，彻底删除返回undefined
替换节点：
1.a.replaceChild(b,c) 用b节点替换a中的c节点
元素节点的一些属性：
innerHTML 指的是元素里的html片段，包含里面的文本，标签所有的
innerText 纯文本 老版本的火狐不支持
textContent 纯文本 老版本的IE不好使
setAttribute(name,value) 设置元素的属性和属性值；参数必须为2个，可以设置系统没有的属性，主要是做点击量统计
div.setAttribute(‘data-cid‘,‘1‘) 此时我们为div标签添加了一个data-cid属性，值为1
getAttribute(name) 返回属性的值
div.getAttribute(‘data-cid‘) 返回 1
div.onclick = function(){
console.log(this.getAttribute("data-cid")) //这个属性没有任何作用，仅仅只是起到一个标识的作用
}
以上是关于js DOM的主要内容，如果未能解决你的问题，请参考以下文章