DOM

DOM

Node类型

属性nodeName、nodeValue

节点关系

属性childNodes——其中保存着一个NodeList对象

属性parentNode——指向文档树的父节点

属性previousSibling

属性nextSibling

属性firstChild、lastChild

操作节点

向childNodes列表末尾添加一个节点——appendChild()

插入节点——insertBefore()

替换节点——replaceChild()

移除节点——removeChild()

其它方法

复制节点——cloneNode()

处理文本节点——normalize()

Document类型

文档的子节点

-document.documentElement

-document.body

-document.childNodes[0]

文档信息

-document.title

-document.url

-document.domain

-document.referrer

查找元素

-document.getElementById()

-document.getElementByTagName()

在HTML中，这个方法会返回一个HTMLCollection对象（动态集合）

-document.getElementByName()

特殊集合

-document.anchors

-document.applets

-document.forms

-document.images

-document.link

DOM一致性检测

-document.implementation.hasFeature(“XML”,”1.0”)

文档写入

-document.write()

-document.writeln()

-document.open()

-document.close()

Element类型

-element.tagName

-element.id

-element.title

-element.lang

-element.dir

-element.className

操作元素特性

取得元素特性——element.getAttribute()

设置元素特性——element.setAttribute()

删除元素特性——element.removeAttribute()

Attributes属性

元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。

-getNamedItem(name)

-removeNamedItem(name)

-setNamedItem(name)

-item(pos)

创建元素

-document.createElement()

Text类型

操作文本节点

-appendData(text)

-deleteData(offset,count)

-insertData(offset,text)

-replaceData(offset,count,text)

-splitText(offset)

-substringData(offset,count)

创建文本节点

-document.createTextNode()

规范化文本节点(合并)

-element.normalize()

分割文本节点

-splitText()

Comment类型

CDATASection类型

DocumentType类型

DocumentFragment类型

Attr类型

取得元素特性——element.getAttribute()

设置元素特性——element.setAttribute()

删除元素特性——element.removeAttribute()

只返回特性的值

创建特性节点——document.createAttribute()

取得元素特性节点——element.getAttributeNode()

设置元素特性节点——element.setAttributeNode()

删除元素特性节点——element.removeAttributeNode()

返回对应的特性节点

DOM操作技术

动态脚本

DOM代码

var script=document.createElement("script");
script.type="text/javascript";
script.src="client.js"
document.body.appendChild(script);

函数封装

function loadScript(url){
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src=url
    document.body.appendChild(script);
}
loadScript("client.js")

动态样式

DOM代码

var link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href="style.css";
var head=document.getElementsByTagName("head")[0];
head.appendChild(link);

函数封装

function loadStyles(url){
    var link=document.createElement("link");
    link.rel="stylesheet";
    link.type="text/css";
    link.href=url;
    var head=document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
loadStyles("styles.css");

二、DOM扩展

 

转载于:https://my.oschina.net/u/3240534/blog/856825