Javascript操作Dom（拥抱native）

最新推荐文章于 2024-10-30 18:24:25 发布

i大俊

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量433

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/hope_It/article/details/72716743

版权

在用JQuery操作Dom的时候，确实是件舒服的事情。但是与此同时，原生的Javascript操作dom方法也在不断地强大，拥抱native

getElementById()

通过其ID返回元素的引用,这个是最熟悉的

document.getElementById('id');

getElementByTagName()

返回具有HTMLCollection给定标签名称的元素。搜索完整的文档，包括根节点。返回的HTMLCollection是活的，这意味着它会自动更新，以保持与DOM树的同步，而无需document.getElementsByTagName()再次调用。

document.getElementByTagName(),
element.getElementByTagName()两者类似，只是document会搜索全部

<script>
    var all = document.getElementByTagName('p');
    // all.length : 5
    var div1 = document.getElementById('div1');
    var div1Paras = div1.getElementsByTagName('p');
    // div1Paras.length : 3
</script>
<body>
    <p>Some body text</p>
    <p>Some body text</p>
    <div id="div1">
        <p>Some div1 text</p>
        <p>Some div1 text</p>
        <p>Some div1 text</p>
    </div>
</body>

querySelector()

返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点）。

<body style="border: solid green 3px">
    <p class="p1">Some body text</p>
    <p class="p1">Some body text</p>
    <div id="div1">
        <p>Some div1 text</p>
        <p>Some div1 text</p>
        <p>Some div1 text</p>
    </div>
    <script>
    var classN = document.querySelector('.p1');
    var id = document.querySelector('#div1');
    </script>
</body>

来个更强大的

<div class="user-panel main">
    <input name="login"/> //这个标签将被返回
</div>

<script>
    var el = document.querySelector("div.user-panel.main input[name=login]");
</script>

简直就是JQuery中$()的翻版，再看看浏览器的情况，还是杠杠滴
这里写图片描述

querySelectorAll()

返回与指定的选择器组匹配的文档中的元素列表（使用文档节点的深度优先预先遍历）。返回所有匹配元素节点的非活动 NodeList状态。

<body style="border: solid green 3px">
    <p class="p1">Some body text</p>
    <p class="p1">Some body text</p>
    <div id="div1">
        <p>Some div1 text</p>
        <p>Some div1 text</p>
        <p>Some div1 text</p>
    </div>
    <script>
    var classN = document.querySelectorAll('.p1');
    console.log(classN); // classN.length : 2
    </script>
</body>

浏览器情况
这里写图片描述

getElementsByClassName

返回具有所有给定类名的所有子元素的类数组对象。
元素是活着HTMLCollection的元素。这意味着它会自动更新

<body style="border: solid green 3px">
    <p class="p1">Some body text</p>
    <p class="p1">Some body text</p>
    <div id="div1">
        <p>Some div1 text</p>
        <p>Some div1 text</p>
        <p>Some div1 text</p>
    </div>
    <script>
    var classN = document.getElementsByClassName('p1');
    console.log(classN); // classN.length : 2
    </script>
</body>

既然返回的是类数组，则可以转化为数组

Array.prototype.slice.call(arr);
// ES6
Array.from(arr);

浏览器情况
这里写图片描述

classList

这Element.classList是一个只读属性，它返回DOMTokenList元素的类属性的实时集合。element.classList本身是只读的，尽管您可以使用 add() and remove()方法进行修改。

方法
- add（String [，String]）。添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
- remove（String [，String]）。删除指定的类值。
- toggle（String [，force]）。当只有一个参数存在时：切换类值; 即，如果它是类存在，那么删除它并返回false，如果没有，那么添加它并返回true。当存在第二个参数时：如果第二个参数的值为true，则添加指定的类值，如果它的值为false，则将其删除。
- contains（String）。检查元素的class属性中是否存在指定的类值。
实例，看到这些用法，不得不再次想到JQuery，太像了

<body style="border: solid green 3px">
    <div class="foo bar">
        <p>Some div1 text</p>
        <p>Some div1 text</p>
        <p>Some div1 text</p>
    </div>
    <script>
    div.classList.remove("foo");
    div.classList.add("anotherclass");

    // if visible is set remove it, otherwise add it
    div.classList.toggle("visible");

    // add/remove visible, depending on test conditional, i less than 10
    div.classList.toggle("visible", i < 10);

    alert(div.classList.contains("foo"));

    // add or remove multiple classes
    div.classList.add("foo", "bar");
    div.classList.remove("foo", "bar");
    </script>
</body>