Javascript学习三——操作DOM

目录

一、使用节点

（1）节点类型

（2）节点名称与值及其关系

（3）访问和操作节点

二、使用文档节点

（1）访问文档子节点

（2）访问文档信息、元素和集合

三、使用元素节点

---

一、使用节点

（1）节点类型

DOM规定整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是节点文本，元素的属性是一个属性节点，注释属于注释节点，如此等等。

（2）节点名称与值及其关系

使用节点的nodeName和node Value属性可以读取节点的名称和值。

      DOM把文档视为一种树结构，这种树结构被称为节点树。JavaScript脚本可通过这棵树访问所有节点，可以修改或删除它们的内容，也可以创建新的节点。
      节点之间的关系包括：上下级别的父子关系，相邻级别的兄弟关系。简单描述如下:
        1、在节点树中，最顶端节点为根节点。
        2、除了根节点之外，每个节点都有一个父节点。
        3、节点可以包含任何数量的子节点。
        4、叶子是没有子节点的节点。
        5、同级节点是拥有相同父节点的节点。

（3）访问和操作节点

     通过节点之间的树形关系，我们可以定位文档中每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。
        ownerDocument：返回当前节点的根元素（document对象）。
        parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点。每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，因此它们parentNode的属性都指向同一个节点
        childNodes：返回当前节点的所有子节点的节点列表。每个节点都有一个childNodes属性，该属性保存着一个nodeList对象，它表示所有子节点的列表。
        firstChild：返回当前节点的首个子节点。
        lastChild：返回当前节点的最后一个子节点。
        nextSibling：返回当前节点之后相邻的同级节点。
        previousSibling：返回当前节点之前相邻的同级节点。

操作节点：
        appendChild（）: 向节点的子节点列表的结尾添加新的子节点
        cloneNode（）: 复制节点
        hasChildNodes（）: 判断当前节点是否拥有子节点
        insertBefore（）: 在指定的子节点前插入新的子节点
        normalize（）: 合并相邻的Text节点并删除空的Text节点
        removeChild（）：删除（并返回）当前节点的指定子节点
        replaceChild（）：用新节点替换一个子节点

二、使用文档节点

（1）访问文档子节点

  访问文档子节点有两种方法：

        使用documnetElement 属性，该属性始终指向HTML 页面中的htlm元素。

        使用childNodes 列表访问文档元素。

（2）访问文档信息、元素和集合

信息访问：

        title：设置或返回<title>标签包含的文本信息。

        lastModified: 返回文档最后被修改的日期和时间

        URL: 返回当前文档的完整URL，即地址栏中显示的地址信息。

        domain: 返回当前文档的域名。

        referrer: 返回链接到当前页面的那个页面的URL。在没有来源的页面的情况下，referrer 属性中可能会包含空字符串。

元素访问：

        getElementById(): 返回指定id属性值的元素。id值要区分大小写，如果找到多个id相同的元素，则返回第一个元素，如果没有找到指定id元素，则返回null。

        getElementsByTagName(): 返回所有指定标签名称的元素节点。

        getElementsByName(): 返回所有指定名称（name属性值）的元素节点。该方法多用于表单结构中，用于获取单选按钮组或复选框组。

集合访问：

        document.anchors: 返回文档中所有Anchor对象，即所有带name特性的<a>标签。

        document.applets: 返回文档中所有Applet对象，即所有<applet>标签，不再推荐使用。

        document.forms: 返回文档中所有Form对象，与document.getElementsByTagName("form")得到的结果相同。

        document.images: 返回文档中所有Image对象，与document.getElementsByTagName("img")得到的结果相同。

        document.links: 返回文档中所有Area和Link对象，即所有带href特性的<a>标签。

三、使用元素节点

访问元素：

        getElementById()可以准确获取文档中指定元素，getElementByTagName()方法可以获取指定标签名称的所有元素

遍历元素：

        使用parentNode、nextSibling、previousSibling、firstChild和lastChild属性可以遍历文档树中每个节点。

创建元素：

        createElement()方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。

复制元素：

        cloneNode()方法可以创建一个节点的副本。

插入节点：

        appendChild()方法可以向当前节点的子节点列表的末尾添加新的子节点，insertBefore()方法可以在已有的子节点前插入一个新的子节点。

删除节点：

        removeChild()方法可以从子节点列表中删除某个节点。

替换节点：

        replaceChild()方法可以将某个子节点替换为另一个。