DOM（文档对象模型）基础加强

文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用。
模型：所有的标记型文档都具有一些共性特征的一个体现。
　　  用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签、文本、属性）都封装成对象。

　　　封装成对象的目的：是为了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。

标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档，DOM这种技术都可以对其进行操作。
常见的标记型文档包括：HTML、XML。

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

DOM结构模型图如下所示：

DOM（文档对象模型）基础加强

DOM的三个级别和DHTML介绍

DOM模型有三种：
    DOM level 1：将html文档封装成对象。
    DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
    DOM level 3：支持xml1.0的一些新特性。
    
DHTML
    动态的HTML，它不是一门语言，是多项技术综合体的简称。
    包括html、css、dom、javascript。

这四种语言的职责：
    html：负责提供标签，封装数据，这样便于操作数据。
    css：负责提供样式，对标签中的数据进行样式定义。
    dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。
    javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

NODE接口的特性和方法

    
特性/方法             类型/返回类型         说明

nodeName             String              节点的名字；根据节点的类型而定义　　　 元素节点返回元素名称，属性节点返回属性名称，文本节点返回内容为#text的字符串
nodeValue            String              节点的值；根据节点的类型而定义　　　　 元素节点返回null，属性节点返回属性的值，文本节点返回文本节点的内容
nodeType             Number              节点的类型常量值之一　　　　　　　　   元素节点返回1，属性节点返回2，文本节点返回3
　　nodeName(只读)    
　　nodeType(只读)    
　　nodeValue(可读可写)

ownerDocument        Document            指向这个节点所属的文档

firstChild           Node                指向在childNodes列表中的第一个节点
lastChild            Node                指向在childNodes列表中的最后一个节点

childNodes           NodeList            所有子节点的列表
parentNode           Node                返回一个给定节点的父节点

previousSibling      Node                指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling          Node                指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null

hasChildNodes()      Boolean             当childNodes包含一个或多个节点时，返回真

attributes           NamedNodeMap        包含了代表一个元素的特性的Attr属性对象；仅用于Element元素节点

appendChild(node)    Node                将node添加到childNodes的末尾
removeChild(node)    Node                从childNodes中删除node

replaceChild(newnode, oldnode)    Node   将childNodes中的oldnode替换成newnode
insertBefore(newnode, refnode)    Node   在childNodes中的refnode之前插入newnode

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document 对象的集合
    all[]　　 提供对文档中所有 HTML 元素的访问，返回对文档中所有 HTML 元素的引用。
        语法
        document.all[i]
        document.all[name]
        document.all.tags[tagname]
        all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。
        all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。
        尽管如此，这个 all[] 数组在已有的代码中仍然使用。
    forms[]  返回对文档中所有 Form 对象引用。 
        语法
        document.forms[]
        
Document 对象的属性
    body　　 提供对 <body> 元素的直接访问，对于定义了框架集的文档，该属性引用最外层的 <frameset>。

Document 对象的常用方法
    getElementById("属性id的值")　　　　     返回对拥有指定 id 的第一个对象的引用 
    getElementsByName("属性name的值")　　　　返回带有指定名称的对象集合 
    getElementsByTagName("标签名称")　　      返回带有指定标签名的对象集合 
    write()                 　　　　　　　　 向文档写 HTML 表达式 或 JavaScript 代码 

示例代码如下：

<body>
    您喜欢的城市:
    <br>
    <ul id="city">
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重庆</li>
    </ul>
    您喜欢的游戏:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐</li>
        <li id="ms" value="moshou">魔兽</li>
        <li id="xj" value="xingji">星际争霸</li>
    </ul>
</body>

<script type="text/javascript">
  
    // 增加城市节点  <li id="tj" value="tianjin">天津</li> 并放置到city下
    var li = document.createElement("li"); // 创建新儿子标签对象(元素对象)
    
    // 添加属性
    li.setAttribute("id", "tj");
    li.setAttribute("value", "tianjin");
    // 添加文本
    var txt = document.createTextNode("天津"); // 创建文本对象
    li.appendChild(txt); // 把文本对象添加到标签对象的内部
   
// 把标签对象添加到ul对象中
    var ul = document.getElementById("city");
    ul.appendChild(li);  // 用爸爸ul对象把新儿子标签对象添加进来
     
</script>

Element 对象

Element 对象的方法
    getAttitude("属性名称")                获取属性的值 
    setAttribute("属性名称", "属性的值")    设置属性
    removeAttribute("属性名称")            删除属性
    
在 Element 对象中查找 Element 对象
在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName("标签名称")方法。而该方法返回的是一个集合。

示例代码如下：

<body>
    您喜欢的城市:
    <br>
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重庆</li>
    </ul>
    您喜欢的游戏:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐</li>
        <li id="ms" value="moshou">魔兽</li>
        <li id="xj" value="xingji">星际争霸</li>
    </ul>
</body>

<script type="text/javascript">
  
    // 给这个节点增加 name属性 例如：<li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
    var xj = document.getElementById("xj");
    xj.setAttribute("name", "xingjizhengba");
    // 测试
    alert(xj.getAttribute("name"));
        
</script>

Node 常用属性

节点名称
nodeName：其内容是给定节点的名字。
    如果给定节点是一个元素节点，nodeName返回这个元素的名称(标签名)。
    如果给定节点是一个属性节点，nodeName返回这个属性的名称(属性名)。
    如果给定节点是一个文本节点，nodeName返回一个内容为 #text 的字符串。
    
节点类型    
nodeType：返回一个整数，这个数值代表着给定节点的类型。
    如果给定节点是一个元素节点，nodeType返回值是1。
    如果给定节点是一个属性节点，nodeType返回值是2。
    如果给定节点是一个文本节点，nodeType返回值是3。
    
节点的值    
nodeValue：返回给定节点的当前值（字符串）。
    如果给定节点是一个元素节点，nodeValue返回值是 null。
    如果给定节点是一个属性节点，nodeValue返回值是这个属性的值。
    如果给定节点是一个文本节点，nodeValue返回值是这个文本节点的内容。
示例代码：

<body>
    <form name="form1" action="test.html" method="post">
        <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
        <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
        <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
        <input type="button" name="ok" value="保存1" />
    </form>
    <p id="pid">明天上课</p>
</body>

<script type="text/javascript">
  
    // <input type="text" name="tname" value="IT精英培训_1" d="tid_1" ><br>
    // 元素节点 ：id="tid_1"，输出nodeName(只读)    nodeType(只读)     nodeValue(可读可写)
    var node = document.getElementById("tid_1");
    alert(node.nodeName); // input    元素节点返回元素名称，属性节点返回属性名称，文本节点返回内容为#text的字符串
    alert(node.nodeType); // 1        元素节点返回1，属性节点返回2，文本节点返回3
    alert(node.nodeValue); // null    元素节点返回null，属性节点返回属性的值，文本节点返回文本节点的内容

    // <p id="pid">明天上课</p>
    // 获取标签中的属性节点 ：id="pid",输出 nodeName    nodeType    nodeValue
    var node = document.getElementById("pid");
    var p = node.getAttributeNode("id");
    alert(p.nodeName); // id
    alert(p.nodeType); // 2
    alert(p.nodeValue); // pid
    
    // <p id="pid">明天上课</p>
    //  获取标签中的文本节点 ：id="pid"，输出 nodeName    nodeType    nodeValue
    var node = document.getElementById("pid");
    var textNode = node.firstChild;
    alert(textNode.nodeName); // #text
    alert(textNode.nodeType); // 3
    alert(textNode.nodeValue); // 明天上课
    
</script>

--------------------------------------
想要获取标签中的属性节点，可以用方法：
    标签对象.tAttributeNode("属性名称");
示例代码如下：

<body>
    您喜欢的城市:
    <br>
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重庆</li>
    </ul>
    您喜欢的游戏:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐</li>
        <li id="ms" value="moshou">魔兽</li>
        <li id="xj" value="xingji">星际争霸</li>
    </ul>
</body>

<script type="text/javascript">
  
      // 获取  <li id="xj" value="xingji">星际争霸</li> 节点的value属性的值
      // 法一：
      var xj = document.getElementById("xj");
      alert(xj.getAttribute("value")); // xingji
      
      // 法二：
      // 获取标签中的属性节点
      var value = xj.getAttributeNode("value");
      alert(value.nodeValue); // xingji
      
</script>

--------------------------------------

想要获取标签中的文本节点，可以采用属性：
    方式1：当前标签对象的 childNodes; 属性，再取需要的下标位置。
    方式2：直接使用当前标签对象的 firstChild; 和 lastChild; 属性。（该方式前提是只有一个孩子）
示例代码如下：

<body>
    <h1 id="h1">明天休息</h1>
</body>

<script type="text/javascript">
  
    // <h1 id="h1">明天休息</h1>
    // 方法一： 利用firstChild/lastChild 输出  明天休息
    var h1 = document.getElementById("h1");
    var textNode = h1.firstChild; // 因为只有一个孩子，lastChild也可以
    alert(textNode.nodeName); // #text
    alert(textNode.nodeType); // 3
    alert(textNode.nodeValue); // 明天休息
      
    // 测试nodeValue是一个读写属性
    alert(textNode.nodeValue); // 明天休息
    alert(textNode.nodeValue = "明天继续上课"); // 明天继续上课
      
    // 方法二：childNodes属性表示父元素下的所有的子元素(数组/集合)
    var h2 = document.getElementById("h1");
    var childs = h2.childNodes;
    alert(childs[0].nodeValue); // 明天休息

 </script>

父节点、子节点和同辈节点

父节点：
    parentNode;            属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
        注意：document 节点的没有父节点。
    
子节点：
    childNodes;            获取指定节点的所有子节点集合。
    firstChild;            获取指定节点的第一个子节点。
    lastChild;             获取指定节点的最后一个子节点。

同辈节点：
    nextSibling;        　 返回一个给定节点的下一个兄弟节点。
    previousSibling;　　　　返回一个给定节点的上一个兄弟节点。
    
IE6-8 Chrome                                IE9-10 Chrome & FireFox Chrome
    firstChild;        第一个节点　　　　　　　　　　firstElementChild;         第一个节点
    lastChild;　　　　  最后一个节点　　　　　　　　  lastElementChild;          最后一个节点
    nextSibling;　　   下一同级节点　　　　　　　　  nextElementSibling;        下一同级节点
    previousSibling;　 上一同级节点　　　　　　　　　previousElementSibling;    上一同级节点

节点属性

节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点（特别是元素节点）的属性。

事实上，attributes中包含的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。

检测子节点和属性

查看是否存在子节点方法： hasChildNodes()
查看是否存在属性方法：hasAttributes()
即使节点中没有定义属性，其 attributes; 属性仍然有效的，而且长度值为0。同样节点中的 childNodes; 属性也是如此。

当你想知道某个节点是否包含子节点和属性时，可以使用 hasChildNodes() 和 hasAttributes() 方法。
但是，如果还想知道该节点中包含多少子节点和属性的话，仍要使用 attributes; 和 childNodes; 属性。
在IE浏览器中，不存在 hasAttributes() 方法！

操作 DOM 节点树

插入节点:
    appendChild()方法
    insertBefore(new, old)方法
    没有insertAfter()方法
示例代码：

<body>
    <ul>
        <li id="bj" name="beijing">北京</li>
        <li id="sh" name="shanghai">上海</li>
        <li id="cq" name="chongqing">重庆</li>
    </ul>
</body>

<script type="text/javascript">
      
    // 在 上海节点的后面 插入天津节点  <li id="tj" name="tianjin">天津</li>
    var li = document.createElement("li");
    li.setAttribute("id", "tj");
    li.setAttribute("name", "tianjin");

    var txt = document.createTextNode("天津");
    li.appendChild(txt);

    var ul = document.getElementsByTagName("ul");
    var sh = document.getElementById("sh");
    var cq = sh.nextSibling; // 通过上海节点找到重庆节点(即下一个兄弟)

    ul[0].insertBefore(li,cq);
    
</script>

删除节点：
    removeChild()方法
示例代码：

<body>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh" name="shanghai">上海</li>
        <li id="cq" name="chongqing">重庆</li>
    </ul>
</body>

<script type="text/javascript">
  
    // 删除  <ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
    var city = document.getElementById("city"); // 先获取爸爸节点对象
    var bj = document.getElementById("bj");    // 再获取儿子节点对象
    city.removeChild(bj); // 用爸爸干掉儿子
     
</script>

替换节点：
    replaceChild(new, old)方法
示例代码：

<body>
    您喜欢的城市:
    <br>
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重庆</li>
    </ul>
    您喜欢的游戏:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐
            <p>精英</p>
        </li>
        <li id="ms" value="moshou">魔兽</li>
        <li id="cq" value="chuanqi">**</li>
    </ul>
</body>

<script type="text/javascript">
  
     // 点击北京节点， 将被反恐节点替换
    var bj = document.getElementById("bj"); // 旧节点对象
    var fk = document.getElementById("fk"); // 新节点对象
    bj.onclick = function() {
        var parentNode = this.parentNode;
        parentNode.replaceChild(fk, this); // 通过父节点对象才能来替换
    };
    
</script>

innerHTML属性

浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。

innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。

innerHTML 属性多与div或span标签配合使用。

示例代码：

<body>
    <div id="subject">jquery</div>
</body>

<script type="text/javascript">

    // 使用innerHTML读出id="subject"中的文本内容
    var div = document.getElementById("subject");
    // 原先的做法
    // var textNode = div.firstChild; 
    // alert(textNode.nodeValue);
    // 现在的做法
    alert(div.innerHTML);

    // 将 <h1>今天</h1> 写到div的层中
    var div = document.getElementById("subject");
    div.innerHTML = "<h1>今天</h1>";
    
</script>

DOM（文档对象模型）基础加强

DOM（文档对象模型）基础加强

DOM的三个级别和DHTML介绍

NODE接口的特性和方法

Document 对象

Element 对象

Node 常用属性

父节点、子节点和同辈节点

节点属性

检测子节点和属性

操作 DOM 节点树

innerHTML属性

相关推荐