JS-DOM对象

Posted 2020-11-14 lynnblog

DOM对象

一、DOM对象

　　DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 html 和 XML 文档的标准。W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。本文中只介绍基于HTML的 DOM。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

 

二、DOM结点

各个结点对象

    document     // 整个文档是一个文档节点
    element      //每个 HTML 元素是元素节点
    text         //HTML 元素内的文本是文本节点
    attribute    //每个 HTML 属性是属性节点
    comment      //注释是注释节点

 

各结点属性

    attributes    //节点（元素）的属性节点
    nodeType      //节点类型
    nodeValue     //节点值
    nodeName      //节点名称
    innerHTML     //节点所包含的所有元素
    innerText     //节点所包含的所有文本元素

 

导航属性

    parentNode       //节点（元素）的父节点 (推荐)
    firstChild       //节点下第一个子元素
    lastChild        //节点下最后一个子元素
    childNodes       //节点（元素）的子节点

 

推荐导航属性

    parentElement                //父节点标签元素
    children                     //所有子标签
    firstElementChild            //第一个子标签元素
    lastElementChild             //最后一个子标签元素
    nextElementtSibling          //下一个兄弟标签元素
    previousElementSibling       //上一个兄弟标签元素

 

 访问HTML属性

    getElementById()          //通过id属性访问，不支持局部查找
    getElementsByTagName()    //通过标签名字访问
    getElementsByClassName()  //通过class名字访问
    getElementsByName()       //通过属性名字访问，不支持局部查找

 

DOM结点的具体用法

　　下面是用于测试的HTML的body内容

    <div class="divTag1">
        大家好才是真的好！
        <p name="pTag1" class="pTag2">P标签</p>
        <div class="divTag2" id="id_Div">
            从你的世界路过
            <div>今天世界很美好</div>
            <a href="www.baidu.com">百度</a>
        </div>
        <span>成熟是一种明亮而不刺眼的光辉</span>
    </div>
    <span>span标签2</span>
    <div>div标签</div>

 

　　下面是用于测试的javascript内容

getElementsByClassName的使用

    //getElementsByClassName返回的是一个集合，所以必须取第一个元素
    var ele = document.getElementsByClassName("divTag1")[0];
    console.log(ele);                //显示内部的所有元素
    console.log(ele.innerHTML);      //显示内部的所有元素
    console.log(ele.innerText);      //显示内部的所有文本元素

 

getElementsByTagName的使用

    var ele = document.getElementsByTagName("p");
    console.log(ele);           //获取所有P标签的集合
    console.log(ele[0]);        //获取所有P标签集合中的第一个元素

 

getElementsByid的使用

    //ID是唯一的，所以通过id获取的标签只有一个
    var ele = document.getElementById("id_Div");
    console.log(ele)               //获取id为id_Div标签
    console.log(ele.innerHTML);    //显示标签的元素

 

getElementsByName的使用

    var ele = document.getElementsByName("pTag1");
    console.log(ele)                 //显示结点列表NodeList(1)
    console.log(ele[0].innerHTML)    //显示的值为：P标签

 

导航属性

    var ele = document.getElementsByClassName("divTag1")[0];
    console.log(ele)                        //显示集合第一个元素的所有内容
    console.log(ele.children)               //显示子元素的所有内容
    console.log(ele.children[0])            //子元素的第一个元素
    console.log(ele.children[0].children)   //集合为空

 

局部查找

　　在属性导航中，所谓局部查找的意思是在访问HTML属性的基础上进一步访问HTML属性。但需要特别注意的是getElementById()和getElementsByName()不支持局部查找的。

    var ele1 = document.getElementsByClassName("divTag1")[0];
    //在ele1的基础上继续查找
    var ele2 = ele1.getElementsByTagName("span");
    console.log(ele2);