DOM&DHTML

js的DOM对象

** document object model：文档对象模型
** 文档：超文本文档（超文本标记文档） html、xml
** 对象：提供了属性和方法
** 模型：使用属性和方法操作超文本标记性文档

*** 可以使用js里面的dom提供的对象，使用这些对象的属性和方法，对标记文档进行操作
*** 想要对标记文件进行操作，首先需要将标记型文档的所有内容封装成对象
　　- 需要把html文件中的标签、属性、文件内容都封装为对象
*** 要想对标记型文档进行操作，解析标记型文档
　　- 如何使用dom解析html
*** 解析过程

根据html的层级结构，在内存分配一个树形结构，需要把html中每部分封装成对象。
　　- document 对象：整个文档
　　- element 对象：标签对象
　　- 属性对象
　　- 文本对象
　　- Node节点对象：此对象是这些对象的父对象
　　如果在对象里找不到想要的方法就到Node对象里面去找

***** DOM要操作标记型文档必须先进行解析

操作DOM树

** appendChild方法
　　* 添加子节点到末尾
　　* 特点：类似于剪切粘贴的过程

** insertBefore(newNode,oldNode)方法
　　* 在某个节点之前插入新个节点

　　　　

<ul id="ulid">
        <li id="li1">赤名莉香</li>
        <li id="li2">关口里美</li>
        <li id="li3">周芷若</li>
        <li id="li4">赵敏</li>
        </ul>
        <input type="button" value="点击添加" onclick="add()">
        <script type="text/javascript">
            function add(){
                var li4 = document.getElementById("li4");
                var li = document.createElement("li");
                var text = document.createTextNode("郑强");
                li.appendChild(text);
                var ul = document.getElementById("ulid");
                ul.insertBefore(li,li4);
            }
        </script>

 

** 没有insertAfter()方法

** removeChild()方法，删除节点
　　* 通过父节点删除，不能自己删除自己

** replaceChild(newNode,oldNode)方法，替换节点
　　* 不能自己替换自己，通过父节点替换

** cloneNode(boolean)，复制节点
　　* -把ul列表复制到另外一个div里面
　　　　获取到ul
　　　　执行复制方法 cloneNode(true)方法复制到true
　　　　把复制后的内容放到div里面去
　　　　获取div
　　　　appendChild方法

操作dom树总结

** 获取节点
　　getElementById();通过节点的id属性，查找相应节点
　　getElementByName();通过节点的name属性，查找相应节点
　　getElementByTagName();通过节点名称，查找相应节点

** 插入节点方法
　　insertBefore()方法，在某个节点之前插入
　　appendChild()方法，在末尾添加，剪切粘贴

** 删除节点方法
　　removeChild()方法，通过父节点删除

** 替换节点方法
　　replaceChild()方法，通过父节点替换

 

DHTML：是很多技术的简称

** html：封装数据
** css：使用属性和属性值设置样式
** dom：操作html文档（标记型文档）
** JavaScript：专门指的是js的语法语句（ECMAScript）