您的位置：首页 > Web前端 > JavaScript

[Javascript 高级程序设计]学习心得记录12 DOM基础

2017-12-08 16:06 706 查看
    DOM（文档对象模型）是针对HTML和XML文档的一个API。同时，DOM也是不断的在升级完善，后面还会讲DOM扩展，DOM2，DOM3等等，这篇文档主要就DOM1进行讲解。

一，节点层次

    DOM把html文档描绘成一个树形结构，每一个节点都是各种各样的类型，不同类型分别表示文档中不同的信息和标记。html元素通过元素节点表示、特性节点通过特性节点表示等等，有12种类型，下面挑几个我觉得重要的进行介绍。

常量值常量名
1Node.ELEMENT_NODE  元素节点
2Node.ATTRIBUTE_NODE  属性节点
3Node.TEXT_NODE 文本节点
4Node.CDATA_SECTION_NODE CDATA 区段
5Node.ENTITY_REFERENCE_NODE 实体引用元素
6Node.ENTITY_NODE 实体
7Node.PROCESSING_INSTRUCTION_NODE 表示处理指令
8Node.COMMENT_NODE 注释节点
9Node.DOCUMENT_NODE 最外层的Root element,包括所有其它节点
10Node.DOCUMENT_TYPE_NODE <!DOCTYPE………..>
11Node.DOCUMENT_FRAGMENT_NODE 文档碎片节点
12Node.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" onclick="getValues()">
<input type="button" value="Set Values" onclick="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就是通过动态脚本实现的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript dom
相关文章推荐
新的分享
章节导航