Javascript操作Dom（拥抱native）

来源：互联网发布：mac怎么卸载双系统编辑：程序博客网时间：2024/06/11 04:29

在用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);// ES6Array.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>

浏览器情况

阅读全文

0 0