标签：comm ota document 父节点 clone text 内容 重复 setattr
DOM document object model
DOM 就是描述html节点关系的图谱
DOM提供获取元素的方法和之间关系属性以及操作元素的方法
1、获取元素方法
1.1 通过ID名来获取元素
var oTab = document.getElementById(‘tab‘);
通过id获取时上下文只能是document
若文档中出现同名ID，则通过该方法获得的是第一个元素
若没获取到元素，则返回null
在IE6/7中会把表单元素的name属性值当做id来用，并且不区分id的大小写；所以不要让表单元素的name和id重复，不要用id的大小写区分元素
可以直接用ID名来代替获取元素对象(但是不推荐)，例：console.log(tab)也可获取到元素
1.2 通过标签名来获取元素
var oP = document.getElementsByTagName(‘p‘);
在整个文档中通过标签名获取的是一组元素
document在这里为上下文(context),可通过改变上下文来限制获取范围
获取这组元素长度：Obj.length或Obj[“length”]
获取第一个元素：Obj[0]或Obj.item(0)
1.3 通过元素name属性值获取元素
var names = document.getElementsByName(‘name‘);
在整个文档中通过标签名获取的是一组元素
在IE浏览器下只对表单元素属性有效
1.4 通过元素class属性值获取元素
var list = document.getElementsByClassName(‘list‘);
在整个文档中通过标签名获取的是一组元素
这个方法是项目中最常用的方法
不兼容IE6/7/8
1.5 通过查询class属性值获取元素
document.querySelector(‘.tab‘);
document.querySelectorAll(‘.tab‘);
此方法不兼容IE6/7/8
document.querySelector();获取的是第一个类名元素
document.querySelectorAll();获取的是多个元素，是一个类数组集合
1.6 获取html,body元素
html:document.documentElement
body:document.body
获取当前屏幕宽度的兼容方法：
var width = document.documentElement.clientWidth || document.body.clientWidth;
2、 增加DOM的方法
动态创建一个div元素对象
var div = document.createElement("div");
将创建元素添加到页面去,默认添加到容器的末尾位置
document.body.appendChild(div);
也可以添加到指定元素之前，第一个参数为添加元素，第二个参数为指定元素
document.body.insertBefore(oP,oDiv);
等同于
oDiv.parentNode.insertBefore(oP,oDiv);
3 、删除DOM的方法
只有父级元素才有权利删除，所以必须找到父元素才能删除
oDiv.parentNode.removeChild(oDiv);
4 、克隆DOM的方法
cloneNode() 默认为false，只克隆当前的;设置为true可以把选定元素的子孙元素也克隆出来
var a = oP.cloneNode();
cloneNode(true);
5 、替换DOM的方法
replaceChild(newNode,oldNode)将newNode元素替换oldNode元素
oDiv.parentNode.replaceChild(dd,oP);
6 、增加自定义属性
给DOM增加自定义属性的方式
obj["key"]=value;
obj.key=value;
获取形式只能是obj.key，另一种方式是
obj.setAttribute(key,value);
获取形式只能是obj.getAttribute(key)
删除形式只能是obj.removeAttribute(key)
二者区别在于前者的添加属性不会显示在结构上；后者添加的属性会改变html结构,显示在结构上
而后者的缺陷在于IE6/7/8下不能修改class属性
7、 节点类型
类型 nodeType nodeName nodeValue
元素节点(元素标签) 1 大写的标签名 null
文本节点(文字) 3 text 文字内容
注释节点(注释) 8 comment 注释内容
document 9 document null
在标准浏览器下，把空格和回车的内容都作为text文本节点处理
练习题：模拟children方法，实现获取指定元素下的元素子节点
8、 DOM获取关系属性
Node节点:一个页面中的标签、文字、注释……都是节点
Obj.childNodes 获取所有子节点 (包括文本节点、注释节点、元素节点。。。)
Obj.children 获取所有元素子节点 (只包含元素节点)
Obj.parentNode 获取父节点
Obj.previousSibling 获取上一个哥哥节点(排行第五，则获取的是第四个)
Obj.nextSibling 获取下一个弟弟节点(排行第五，则获取的是第六个)
Obj.firstChild 获取所有子节点中第一个
Obj.lastChild 获取所有子节点中最后一个
标签：comm ota document 父节点 clone text 内容 重复 setattr
原文地址：https://www.cnblogs.com/myiuni/p/10556817.html
