文档对象模型DOM
DOM是什么?
DOM,即Document Object Model,文档对象模型,用于操作HTML的编程接口。
它描绘了一个层次化的节点树,允许编程人员进行节点的添加、修改与删除等操作。
DOM节点
DOM 1级定义了一个Node接口,由DOM中所有的节点实现。
一共有12中节点类型,其中包括Document、Element节点类型等,可通过node.nodeType查询每个节点的类型,例如,Element的节点类型返回数值为1。
每一个节点都有childNodes、parentNode、previousSibling、nextSibling、firstChild、lastChild等节点查询方法。
还有appendChild、insertBefore、replaceChild、removeChild、cloneNode等操作节点的方法。
Document
Document节点表示整个文档。浏览器中的document是一个全局对象,表示HTML页面,是HTMLDocument对象的实例。
document.documentElement:快速取得对html的引用。
document对象只有一个子节点,也就是< html >对象,没必要使用节点操作方法。
document的title、URL、domain、referrer等方法可以访问网页的标题、URL地址、域名及连接当前URL的前一URL。
document.getElementById():获取指定id的元素。
ducument.getElementsByTagName():获取指定标签名的元素,例如var img = ducument.getElementsByTagName("img")
,返回一个HTMLCollection类型的实例,其中img.namedItem("imgName")
可以返回执行name的元素。
ducument.getElementsByName():获取指定name的元素集合。
ducument.write()与ducument.writeln()写入文档。
getElementsByClassName():获取同一类的元素列表,返回NodeList。
document.activeElement():获得当前焦点所在的元素,例如页面加载中,焦点所在的元素是document.body,之后变成null。
document.hasFocus():判断当前文档是否获取了焦点。
document.readyState:”loading”正在加载文档,”complete”加载完毕。
document.compatMode:”CSS1Compat”渲染模式为标准,”BackCompat”渲染模式为混杂模式。
document.charset:查看与设置文档字符集,默认”UTF-16”。
Element
Element类型表现为HTML元素,每个HMTML元素都存在id、title、dir、className、lang属性。
getAttribute() setAttribute()和 removeAttribute()操作属性值。
1 | var div = document.getElementById("myDiv"); |
attributes属性,是表示一个元素属性的动态的集合,可通过nodeValue获取标签值。
1 | var id = div.attributes.getNamedItem("id").nodeValue; |
document.createElement()创建元素。
1 var div = document.createElement("div");
Text类型
Text,文本节点,用于表示不含HTML标签的纯文本。包含在element类型中。
appendData(text):将 text 添加到节点的末尾。
deleteData(offset, count):从 offset 指定的位置开始删除 count 个字符。
insertData(offset, text):在 offset 指定的位置插入 text。
replaceData(offset, count, text):用 text 替换从 offset 指定的位置开始到 offset+ count 为止处的文本。
splitText(offset):从 offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count):提取从 offset 指定的位置开始到 offset+count 为止处的字符串。
1 | <!-- 没有内容,也就没有文本节点 --> |
document.createTextNode()创建新文本节点。
1 | var element = document.createElement("div"); |
DOM操作技术
动态脚本
可以通过doucument.createElement()方法实现动态script代码的引入或创建。1
2
3
4var script = document.createElement("javascript");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);
或者可以通过自定义代码的方式调用
1 | function loadScriptString(code){ |
动态样式
CSS样式可以通过style属性或元素嵌入样式,或者可以通过< link >引入CSS外部文件。
1 | <link rel="stylesheet" type="text/css" href="index.css"> |
与动态script一样的原理,可以通过实现样式的动态添加。
1 | var link = document.createElement("link"); |
或者可以通过自定义代码的方式调用
1 | var style = document.createElement("style"); |
DOM扩展
选择符
- querySelector()与querySelectorAll()方法。
querySelector()
1
2
3
4
5
6
7
8 //取得 body 元素
var body = document.querySelector("body");
//取得 ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");querySelectorAll()
1
2
3
4
5
6 //取得某<div>中的所有<em>元素(类似于 getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");