一、DOM简介
1、DOM是文档对象模型(Document Object Model),由W3C组织提出的标准。
2、DOM是一种XML文档的解析标准。
3、原理:将html文档看成一颗节点树,然后使用dom提供的APl对对应的节点进行增删改查。
4、利用DOM可以让JavaScript对网页中的元素进行控制,实现动态网页的功能。
5、DOM是关于如何获取、修改、添加或删除HTML元素的标准。
二、DOM节点类型
根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点:
1、整个文档是一个文档节点 —— document节点:代表整个文档,也代表根节点。
2、每个HTML元素是元素节点 —— Element:元素节点
3、HTML元素内的文本是文本节点 —— Text:文本节点每个
4、HTML属性是属性节点 —— Attr:属性节点
5、注释是注释节点 —— Comment:注释节点
三、查看节点
document:整个文档
docum.body:返回body节点
childNodes:查看子节点
hasChildNodes:是否有子节点
firstChild / firstElementChild
lastChild / lastElementChild
四、节点的类型与属性
节点有三个属性:
1、nodeName
文档节点值为#document
元素节点name为标签名(大写)
文本节点name为#text
属性节点name为属性名
注释节点name为#comment
2、nodeType
类型 nodeType值
元素节点 1
属性节点 2
文本节点 3
注释节点 8
文档节点 9
3、nodeValue
文本节点的nodevalue就是文本内容
注释节点的nodeValue就是注释内容
元素节点的nodeValue就是null
属性节点的nodeValue就是属性值
五、获取节点的四种方法(重点)
1、getElementByld(id)
通过元素ID取得节点
兼容所有浏览器,推荐使用。
id和别的元素的name不能相同,这是IE的存在的问题
2、getElementsByClassName (class)
通过元素的class取得节点集合
注意:哪怕页面只有唯一一个名为myclass的元素,也会返回一个集合(数组)
3、getElementsByTagName(TagName)
返回指定元素的称的元素节点集合
getElementByTagName(*)能得到所有元素节点集合
4、getElementsByName(name)
按name属性值获取元素节点集合
getElementsByName()只用于表单元素,一般只用于单选按钮和复选框。
拓展:document.querySelector(“css选择器”)
六、新建、添加、删除和替换
1、新建
createElement(name)-创建元素节点
createTextNode(text)-创建文本节点
createAttribute(name)-创建属性节点
createCommnt(text)-创建注释节点
createDocumentFragment()-创建文档碎片节点,提高效率
2、添加(重点)
appendChild():指定节点的最后一个子节点列表之后,添加一个新的子节点
注:appendChild如果添加的是html页面上已经存在的元素,相当于是移动。配合cloneNode(true)使用实现复制。
3、删除
removeChild(node)-删除子节点
4、替换
replaceChild(newNode,oldNode)-替换子节点
5、插入
insertBefore(newNode,oldNode)-插入到指定位置
6、复制
cloneNode(是否包含子节点)-复制节点(函数事件时讲)
如果传递给它的参数是true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。
七、文本节点的操作方法
元素节点.firstChild-获取文本节点
textNode.length-获取文本节点长度
textNode.data="..."-设置文本内容
appendData(string)-添加文本
deleteData(offset,count)-删除指定位置和长度的文本
linsertData(offset,string)-在指定位置插入文本
replaceData(offset,count,string)-替换指定位置和长度的文本
八、属性节点的操作
1、getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法:elementNode.getAttribute(name)
说明:
1、elementNode:使用getElementByld()、getElementsByTagName()等方法,获取到的元素节点。
2、name:要想查询的元素节点的属性名字
2、setAttribute()方法
setAttribute()方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
语法:elementNode.setAttribute(name,value)
说明:
1、name:要设置的属性名。
2、value:要设置的属性值。
注意:
1、把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
2、类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。
上面两种方式均可以使用:html元素节点.属性名 实现。
(attributes:获取属性节点的集合,它是一个属性)
九、innerHTML与innerText;outerHTML与outerText(重点)
innerHTML:返回节点里的所有内容,并且可以识别HTML标签
innerText:返回节点里的文本,并且不能识别标签
直接使用这两属性表示,获取属性值。如果使用 = 号,表示对它进行设置
outerHTML,outerText(它包括自己)
十、DOM操作元素的样式
1、使用style属性(只能获取内联样式属性值)
特点:可读,可写,只能操作内联模式
语法:HTML元素.style.样式属性 = "值";
注:如果样式属性名称中有带有"-"号,去掉"-",并且首字母大写
2.获取内部样式和外部样式(只是获取,不能设置)
1)、currentStyle对象(只限于IE)
语法:HTML元素.currentStyle.样式属性;
2)、DOM提供了getComputedStyle()方法(IE不支持,Firefox支持)
语法:document.defaultView.getComputedStyle(元素,null).属性;
注:第二个参数表示伪元素,如:hover
另:getComputedStyle可以发现有两种调用方式,如下:
window.getComputedStyle()与document.defaultView.getComputedStyle()
两种方式,有什么区别,我们应该如何使用:具说是,在FireFox3.6上不使用defaultView方法就搞不定的,本人没有进行测试。不过jquery框架里可以是使用的defaultView的方式,所以,写defaultView方式,应该是兼容性更好吧。所以,最好还是使用document.defaultView.getComputedStyle()的方式来获取样式。
3)、使用className属性:可设置或返回元素的class样式
语法: HTML元素.className = "样式名称";
为第2点中的第1)、2)点方式写的兼容性代代码:
function getStyle(htmlElement,styleProperty,value){
if(document.currentStyle){
htmlElement.currentStyle[styleProperty] = value;
}else{
document.defaultView.geSomputedStyle(htmlElement,null)[styleProperty] = value;
}
}