DOM(文档对象模型)是针对HTML和XML文档的一个API。同时,DOM也是不断的在升级完善,后面还会讲DOM扩展,DOM2,DOM3等等,这篇文档主要就DOM1进行讲解。
一,节点层次
DOM把html文档描绘成一个树形结构,每一个节点都是各种各样的类型,不同类型分别表示文档中不同的信息和标记。html元素通过元素节点表示、特性节点通过特性节点表示等等,有12种类型,下面挑几个我觉得重要的进行介绍。
常量值 | 常量名 |
1 | Node.ELEMENT_NODE 元素节点 |
2 | Node.ATTRIBUTE_NODE 属性节点 |
3 | Node.TEXT_NODE 文本节点 |
4 | Node.CDATA_SECTION_NODE CDATA 区段 |
5 | Node.ENTITY_REFERENCE_NODE 实体引用元素 |
6 | Node.ENTITY_NODE 实体 |
7 | Node.PROCESSING_INSTRUCTION_NODE 表示处理指令 |
8 | Node.COMMENT_NODE 注释节点 |
9 | Node.DOCUMENT_NODE 最外层的Root element,包括所有其它节点 |
10 | Node.DOCUMENT_TYPE_NODE <!DOCTYPE………..> |
11 | Node.DOCUMENT_FRAGMENT_NODE 文档碎片节点 |
12 | Node.NOTATION_NODE DTD 中声明的符号节点 |
1,Node类型
Node类型是所有节点类型的原型,有一些类型公共的属性和方法。比如nodeType(所有类型都在上面那个表里面),nodeName,nodeValue属性等等,至于对节点的操作和查询,我觉得jquery的类css方式比原生实在好太多了,我就不讲原生了,以后有机会写jquery查询部分的源码解析。至于Node类型,想了解的可以看看这篇https://www.cnblogs.com/yunl/p/5887948.html
2,Document类型(9)
在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。详细的属性和方法在这都有 http://blog.csdn.net/liaodehong/article/details/51548463 感觉我以后讲jquery源码的时候再说吧,这些方法现在都是用jQuery更方便的。提几个常见的:查找类:按id查找返回匹配项的第一个 getElementById()、按标签名查找返回所有匹配项的getElementByTagName()、按名查找返回所有匹配项的getElementByName()。后两个返回的是节点集合对象HTMLCollection。写文档类:write()、open()、close()。此外,值得注意的一点,document.forms包含文档的form表单所有元素、document.anchors包含文档的所有带name属性的a标签、document.link包含文档所有带herf属性的a标签。深入的在后续jquery源码解读会带来的,敬请期待。
3,Element类型(1)
Element类型用于表现html元素,提供了对元素标签名、子节点及特性的访问。
<html>
<head>
<title>HTML Elements Example</title>
</head>
<body>
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr">Some text</div>
<input type="button" value="Get Values" οnclick="getValues()">
<input type="button" value="Set Values" οnclick="setValues()">
<p>Try clicking "Get Values", then "Set Values", then "Get Values" again.</p>
<script type="text/javascript">
var div = null;
function getValues(){
if (div == null) {
div = document.getElementById("myDiv");
}
alert(div.id); //"myDiv"
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"
}
function setValues(){
if (div == null) {
div = document.getElementById("myDiv");
}
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";
}
</script>
</body>
</html>
主要有两点值得特别注意的地方:
特性。元素中普通的属性可以按对象取属性的方法取出来,比如div.id。但是对于自定义特性来说必须通过专门的方法取值和修改。
if (div == null) {
div = document.getElementById("myDiv");
}
alert(div.id); //"myDiv"
alert(div.my_special_attribute); //"hello!" (IE only)
alert(div.getAttribute("my_special_attribute")); //"hello!" (IE only)
alert(div.align); //"left"
其实这个在jQuery里面也有 attr方法。设置是setAttribute方法。
创建元素。先用createElement()方法创建元素,然后对元素的特性进行修改,然后插入到文档树。
function createNewElement(element){
var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
document.body.appendChild(div);
}
4,Text类型(3)
文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。主要有3个方法,都比较简单,直接上代码吧。
创建文本节点
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
合并同胞节点
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); //2
element.normalize();
alert(element.childNodes.length); //1
alert(element.firstChild.nodeValue); //"Hello World!Yippee!"
分割文本节点
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2
二,DOM操作技术
1,动态脚本
在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。值得注意的是jsonp就是通过动态脚本实现的。