当前位置：网站首页>DOM-DOM的介绍以及通过方法获取元素

DOM-DOM的介绍以及通过方法获取元素

2022-07-31 05:18:00 【春意迟迟、】

        DOM的介绍：

       是document object model （文档对象模型 ），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口，把文档中的代码翻译成一个对象模型。在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象，这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等。

        注：只有一个根节点document

                除了根节点外所有节点都有唯一的一个父节点

                document是window对象的属性

         获取元素的方式：

  • document.getElementById（）：通过id的值获取元素。（参数不写选择器的符号）

<body>
    <div class="div1">
        <span id="span1">111</span>
        <div class="div-son"></div>
    </div>
    <div id="div2">222</div>
    <div class="div3">第3</div>
</body>

<script>
    //通过id的属性值获取元素，这里不写#
    var idname1=document.getElementById("div2")
    console.log(idname1)//<div id="div2">222</div>
    //如果用getElementById()方法获取一个不存在的id值，返回null
    var idname1=document.getElementById("div")
    console.log(idname1)//null
</script>
  •  document.getElementsByClassName():通过class的值获取元素.（参数不写选择器的符号）
<body>
    <div class="div1">
        <span id="span1">111</span>
        <div class="div-son"></div>
    </div>
    <div id="div2">222</div>
    <div class="div3">第3</div>
</body>

<script>
    var classname1=document.getElementsByClassName("div3")
    console.log(classname1)//[div.div3]
    // 如果用getElementByClassName()方法获取一个不存在的id值，返回[]
    var classname1=document.getElementsByClassName("div")
    console.log(classname1)//[]
</script>
  • document.getElementsByTagName():通过元素类型获取元素
<body>
    <div class="div1">
        <span id="span1">111</span>
        <div class="div-son"></div>
    </div>
    <div id="div2">222</div>
    <div class="div3">第3</div>
</body>

<script>
    var div=document.getElementsByTagName("div")
    console.log(div)//[div.div1, div.div-son, div#div2, div.div3, div2: div#div2]
    //获取一个不存在的值，会返回[]
    var div=document.getElementsByTagName("div666")
    console.log(div)//[]
</script>
  •  document.getElementsByName():通过name的值获取元素
<body>
    <div class="div1">
        <span id="span1">111</span>
        <div class="div-son"></div>
    </div>
    <div id="div2">222</div>
    <div class="div3">第3</div>
    <input type="text" name="inp" id="input1">
</body>

<script>
    var arr=document.getElementsByName("inp")
    console.log(arr)//[input#input1]
    //获取一个不存在的值，会返回[]
    var arr1=document.getElementsByName("inp-no")
    console.log(arr1)//[]
</script>
  •  document.querySelector():符合选择器的第一个元素,没有找到就返回null
<body>
    <div class="div1">1111</div>
    <div id="div2">222</div>
    <div class="div1">第3</div>
</body>

<script>
    var el1 = document.querySelector(".div1")//符合选择器的第一个元素/null
    console.log(el1)//<div class="div1">1111</div>
    //获取一个不存在的值
    var el2 = document.querySelector(".div3")
    console.log(el2)//null
</script>
  •  document.querySelectorAll():符合选择器的所有元素，没有找到就返回[]。
<body>
    <div class="div1">1111</div>
    <div id="div2">222</div>
    <div class="div1">第3</div>
</body>

<script>
    var el1 = document.querySelectorAll(".div1")//符合选择器的第一个元素/null
    console.log(el1)//[div.div1, div.div1]
    //获取一个不存在的值
    var el2 = document.querySelectorAll(".div3")
    console.log(el2)//[]
</script>

总结：

        （1）document.getElementById()、document.getElementsByClassName()、document.getElementsByName()、document.getElementsByTagName()也就是以get开头的四个方法是H5的旧方法，以query开头的两个是H5新出的方法。

        （2）获取一个不存在的值，都不会报错，但是返回值不同。a.返回值为null（有两个）：document.getElementById（）、document.querySelector()；b.返回值为空类数组（有四个）：document.getElementsByClassName()、 document.getElementsByName()、

document.getElementsByTagName()、document.querySelectorAll()

        （3）对应的，它们获取元素的返回值也有两种，一种是获取的元素标签；另一种是类数组。

原网站

版权声明
本文为[春意迟迟、]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_58167492/article/details/125786947

边栏推荐

猜你喜欢

随机推荐