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

最新推荐文章于 2019-07-02 14:07:30 发布

混血王子1996

最新推荐文章于 2019-07-02 14:07:30 发布

阅读量3.7k

点赞数

分类专栏： Javascrip 文章标签： javascript dom

本文链接：https://blog.csdn.net/m0_37645820/article/details/78738079

版权

Javascrip 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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就是通过动态脚本实现的。

混血王子1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Javascript 高级程序设计]学习心得记录12 DOM基础

DOM（文档对象模型）是针对HTML和XML文档的一个API。同时，DOM也是不断的在升级完善，后面还会讲DOM扩展，DOM2，DOM3等等，这篇文档主要就DOM1进行讲解。一，节点层次 DOM把html文档描绘成一个树形结构，每一个节点都是各种各样的类型，不同类型分别表示文档中不同的信息和标记。html元素通过元素节点表示、特性节点通过特性节点表示等等，有12种类型，下面挑几个我觉
复制链接

扫一扫