DOM基础HTML节点
2016-07-10 22:59:56
188
1.DOM document object model
DOM 就是描述html节点关系的图谱
DOM提供获取元素的方法和之间关系属性以及操作元素的方法
1.1 获取元素方法
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.1.2 通过标签名来获取元素
var oP = document.getElementsByTagName('p');
在
整个文档中通过标签名获取的是一组元素document在这里为上下文(context),可通过改变上下文来限制获取范围
获取这组元素长度：Obj.length或Obj[“length”]
获取第一个元素：Obj[0]或Obj.item(0)
1.1.3 通过元素name属性值获取元素
var names = document.getElementsByName('name');
在
整个文档中通过标签名获取的是一组元素在IE浏览器下只对表单元素属性有效
1.1.4 通过元素class属性值获取元素
var list = document.getElementsByClassName('list');
在
整个文档中通过标签名获取的是一组元素这个方法是项目中最常用的方法
不兼容IE6/7/8
1.1.5 通过查询class属性值获取元素
document.querySelector('.tab');
document.querySelectorAll('.tab');
此方法不兼容IE6/7/8
document.querySelector();获取的是第一个类名元素
document.querySelectorAll();获取的是多个元素，是一个类数组集合
1.1.6 获取html,body元素
html:document.documentElement
body:document.body
获取当前屏幕宽度的兼容方法：
var width = document.documentElement.clientWidth || document.body.clientWidth;
1.2 增加DOM的方法
动态创建一个div元素对象
var div = document.createElement("div");
将创建元素添加到页面去,默认添加到容器的末尾位置
document.body.appendChild(div);
也可以添加到指定元素之前，第一个参数为添加元素，第二个参数为指定元素
document.body.insertBefore(oP,oDiv);
等同于
oDiv.parentNode.insertBefore(oP,oDiv);
1.3 删除DOM的方法
只有父级元素才有权利删除，所以必须找到父元素才能删除
oDiv.parentNode.removeChild(oDiv);
1.4 克隆DOM的方法
cloneNode() 默认为false，只克隆当前的;设置为true可以把选定元素的子孙元素也克隆出来
var a = oP.cloneNode();
cloneNode(true);
1.5 替换DOM的方法
replaceChild(newNode,oldNode)将newNode元素替换oldNode元素
oDiv.parentNode.replaceChild(dd,oP);
1.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属性
1.7 节点类型
| 类型 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点(元素标签) | 1 | 大写的标签名 | null |
| 文本节点(文字) | 3 | text | 文字内容 |
| 注释节点(注释) | 8 | comment | 注释内容 |
| document | 9 | document | null |
在标准浏览器下，把空格和回车的内容都作为text文本节点处理
练习题：模拟children方法，实现获取指定元素下的元素子节点
1.8 DOM获取关系属性
Node节点:一个页面中的标签、文字、注释……都是节点
Obj.childNodes 获取所有子节点 (包括文本节点、注释节点、元素节点。。。)
Obj.children 获取所有元素子节点 (只包含元素节点)
Obj.parentNode 获取父节点
Obj.previousSibling 获取上一个哥哥节点(排行第五，则获取的是第四个)
Obj.nextSibling 获取下一个弟弟节点(排行第五，则获取的是第六个)
Obj.firstChild 获取所有子节点中第一个
Obj.lastChild 获取所有子节点中最后一个
