Html页面Dom对象之Document

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象集合

集合	描述
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

一：Dom模型的全称--->Document Object Model
---->文档对象模型

二WEB页面的html文档，document就是根节点。其他的子对象就是子节点

三节点类型    （1）元素节点例子：<input>
           （2）文本节点例子：尚晓飞   文本节点
           （3）属性节点例子：<input type="shang"/> shang 就是属性节点

四获取元素节点的方法
       【1】直接获取节点：
   （1）获取指定的id属性指定值的节点-->唯一
       var name=document.getElementById("uname");
   （2）获取指定的name属性值的节点--->返回的是一组
       var ad=document.getElementsByName("unameName");
   （3）获取指定元素名的节点--->返回的是一组
       var aaa=document.getElementsByTagName("input");

【2】间接获取节点
   （1）通过父节点，获取子节点。
       //获取父节点
           var father=document.getElementById("showDiv");
           //获取该父节点的子节点node集合
           var sonarray=father.childNodes;
           alert(array[2].nodeValue);

（2）通过字节点，获取父节点
       //通过子节点，获取父节点
           var son=document.getElementById("a");
           var fathera=son.parentNode;

           alert(fathera.id);

   (3)通过兄弟节点，获取节点
       //兄弟节点
               var borther2=document.getElementById("realname");
               var borther1=borther2.previousSibling;//上一个兄弟节点
               var borther3=borther2.nextSibling;//下一个兄弟节点

               while(borther1.nodeType!=1){
                   borther1=borther1.previousSibling;
               }
               alert(borther1.value);

注意：节点的三个属性   ---->nodeName
                       ----->nodeValue
                       ----->nodeType

四：处理属性节点
   （1）元素节点.属性----->获取属性值，也可以为属性重新赋值
   （2）getAttribute(key)--->获取key属性的值
             setAttribute(key,value)--->为该节点设置属性，及属性的值

五：处理文本节点
   （1）获取一个节点内的文本，一般使用innerHtml
      (2)innerHtml不局限操作一个节点,而是可以使用Html片段直接填充页面，或直接获取Html片段。大大提高开发的灵活性
例子：   function innerhtml(){
               alert(document.getElementById("showDiv").innerHTML);
           }

六改变文档的层次结构
   （1）创建元素节点document.creatElement
       var input=document.createElement("input");
                   input.type="text";
                   input.id="123";
                   input.value="天下无双";
    （2）通过父节点，添加到父节点里。parentNode.appendChild
       var father=document.getElementById("showDiv");
                   father.appendChild(input);

      (3)插入节点 parentNode.insertBefore(newnode,beforenode)
       var ab=document.getElementById("a");
                   father.insertBefore(input,ab);

   (4)覆盖节点 parentNode.replaceChild（newnode,oldnode）
       旧节点必须存在，否则发生异常
       father.replaceChild(input,ab);

（5）移除某个节点parentNode.removeChild(childNode)
father.removeChild(ab)