JavaScript DOM

JavaScript DOM

一.概念及作用

Document Object Model -->DOM 文档对象模型,DOM的标准化组织是W3C

DOM是针对HTML和XML文档的一个API

DOM描绘了一个层次化的节点树,即HTML文档中的所有内容都是节点(node)

DOM树中的所有节点都可以通过JS进行访问,允许开发人员,添加,修改,移除,和查询页面的某一个部分.

二.DOM树

DOM树,又被称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面

1.节点类型

1.1 文档节点

一个页面就是一个文档,DOM中使用document表示

1.2 元素节点

每个HTML元素是元素节点

1.3 文本节点

HTMl元素内的是文本节点(回车也是文本节点)

1.4 属性节点

每个HTML的属性,是属性节点

1.5 注释节点

注释是注释节点

2.nodeType属性

返回一个整数,这个数值代表节点的类型

• 元素节点 返回 1
• 属性节点 返回 2
• 文本节点 返回 3
• 注释节点 返回 8
• 文档节点 返回 9

3 nodeName属性

返回节点的名称

• 元素节点的 nodeName 是标签名称 (大写)
• 属性节点的 nodeName 是属性名称
• 文本节点的 nodeName 永远是#text
• 注释节点的 nodeName 永远是# comment
• 文档节点的 nodeName 永远是#docment

4.nodeValue属性

返回节点的值

• 元素节点的 nodeValue,返回值是undefined或null
• 属性节点的 nodeValue,返回值是属性值
• 文本节点的 nodeValue,返回值是文本内容
• 注释节点的 nodeValue,返回值是注释内容
• 文档节点的 nodeValue,返回值是null

元素节点,用innerHTML/innerText/value 设置或取值

tagName 属性返回元素的标签名,并且在HTML中,tagName 属性的返回值始终是大写的.

5.节点关系

节点之间的关系,通常用家庭中的辈分关系描述

• parentNode 父节点
• children 所有元素子节点
• childNodes 所有子节点 ,IE6,7,8与高版本浏览器返回值不一样.谷歌 返回文本节点(回车), IE6,7,8返回元素节点
• nextSibling 下一个兄弟节点
• previousSibling 上一个兄弟节点
• firstChild 第一个子节点
• lastChild 最后一个子节点

属性1	属性2	描述
nextSibling	nextElementSibling 不兼容IE678	下一个兄弟节点
previousSibling	previousElementSibling 不兼容IE678	上一个兄弟节点
firstChild	firstElementChild 不兼容IE678	第一个子节点
lastChild	lastElementChild 不兼容IE678	最后一个子节点

6.节点方法

方法	描述	兼容性
document.documentElement	获取html元素对象
document.body	获取body元素对象
createElement(‘标签名’)	创建元素节点
createTextNode(’’)	创建文本节点
appendChild(node)	末尾插入一个节点node
insertBefore(newNode,target)	target之前插入节点node
removeChild(node)	移除某个子节点
replaceChild(newNode,oldNode)	newNode替换oldNode
document.getElementById(’’)	根据id获取元素
document.getElementByName(’’)	根据name属性获取元素,name属性不唯一
document.getElementByTagName(’’)	获取指定标签名的所有元素列表
document.getElementByClassName(‘类名’)	获取指定className的元素	IE678不支持
document.querySelector('选择器')	通过选择器方式获取元素(返回一个元素)	IE678不支持
document.querySelectorAll('选择器')	通过选择器方式获取元素(返回多个元素)	IE678不支持
cloneNode(boolean)	复制一个节点: true:深复制,复制节点及整个子节点树 false :浅复制,只复制节点本身
getAttribute(‘name’)	获取节点上的name属性的值
setAttribute(‘name’,‘value’)	设置节点上name属性的值为value
removeAttribute(‘name’)	删除节点上name属性
getAttributeNode(‘type’)	获取节点上的type属性节点

7.获取元素样式

7.1 行间样式

<div id='box1' style='width:300px;height:100px'>
</div>

var box1=document.getElementById('box1');
console.log(box1.style.width);//300

7.2 非行间样式

#box2{
 width:200px;
 height:50px;
}
<div id='box2'>
</div>

var box2=document.getElementById('box2');
console.log(box2.style.width);//200

7.3 getComputedStyle获取样式(不兼容IE678)

getComputedStyle(对象,参数).样式

第一个参数是元素对象

第二个参数可以是任何数据,通常写为null或false

7.4 currentStyle 获取样式 IE678的方法

一般写法为element.currentStyle .样式

7.5 封装获取元素样式(兼容处理)

function getStyle(element, attr) {
        if(element.currentStyle) {
                return element.currentStyle[attr];
        } else {
                return getComputedStyle(element, false)[attr];
        }
}

8.offset和client系列属性

属性	描述
offsetLeft	获取对象左侧与定位父级之间的距离(默认是body)
offsetTop	获取对象上侧面与定位父级之间的距离(默认是body)
offsetWidth	获取元素自身的宽度(包含边框)
offsetHeight	获取元素自身的高度(包含边框)
clientLeft,clientTop	获取元素内容到边框的距离,效果和边框宽度相同,很少使用
clientWidth	获取元素自身的宽度(不含边框)
clientHeight	获取元素自身的高度(不含边框)
document.documentElement.clientWidth	浏览器的可视区宽度
document.documentElement.clientHeight	浏览器可视区高度
document.body.clientWidth	body的宽度
document.body.clientHeight	body的高度
document.documentElement.offsetWidth	整个文档宽度
douument.documentElement.offsetHeight	整个文档高度
document.body.scrollTop	获取当前滚动的高度(有兼容性问题)

获取滚动条高度一般使用如下方式:

//浏览器兼容
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// alert(scrollTop); //获取