javascript学习——DOM扩展

最新推荐文章于 2021-04-12 12:30:36 发布

lizzvia

最新推荐文章于 2021-04-12 12:30:36 发布

阅读量299

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u013237862/article/details/51504941

版权

30 篇文章 0 订阅

订阅专栏

主要的两个扩展对象是Selector API和HTML5，添加了一些使用的方法和属性。

Selector API：可以根据CSS选择符选择与某个模式匹配的DOM元素，核心是通过CSS选择符查询DOM文档取得元素的引用。主要方法有querySelector()和querySelectorAll()方法。

querySelector():返回与模式匹配的第一个元素。可以支持元素，类，id

var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var selected = document.querySelector(".selected");

querySelectorAll():返回符合模式的全部元素。返回一个NodeList。
```
var ems = document.getElementById("myDiv").querySelectorAll("em");
```

元素遍历：添加了5个新属性，用于遍历子元素

nextElementSibling：后一个同辈子元素

var i，len,child = element.firstElementChild;
while(child!=element.lastElementChild){
  process(child); //操作该节点
  child = child.nextElementSibling;
}

HTML5:

与类相关的扩充：

getElementByClassName():接收包含一个或多个类型的字符串，返回属于该类的全部元素的nodelist。
```
var allCurrentUserName = document.getElementByClassName("username current");
```
classList属性：包含了该元素所有的class，并且添加了一些操作这些class的方法,包括：

- add（value）:将给定value添加到class中，如果该值已经存在，则不添加
- contains（value）：检测classList里面是否有给定的值，存在则返回true，否则为false
- remove（value）：从classList里面移除value
- toggle（value）：如果列表中有该值，则删去；如果没有，就添加上。

焦点管理：

自定义数据属性：可以为元素添加非标准的属性，只要以data-为前缀即可。访问这些属性可以用dataset属性。

var div = document.getElementById("myDiv");
var appId = div.dataset.appid;
var myName = div.dataset.myname;

插入标记：

innerHTML属性：读模式下：返回与调用元素的所有子节点（包括元素，文本和注释）对应的HTML标记；写模式下，会根据指定的值创建新的DOM树，并完全替代原来的DOM树。例：
```
<div id = "content">
   <p> this is a paragraph</p>
   <ul>
         <li>Item 1</li>
         <li>Item 2</li>
   </ul>
</div>

var div = document.getElementById("content");
alert(div.innerHtml); 
/*返回
  <p> this is a paragraph</p>
   <ul>
         <li>Item 1</li>
         <li>Item 2</li>
   </ul>
*/
```
需要注意的是：1、在innerHtml中添加<script>标签并不会执行其中的脚本，IE8及其早些的版本支持，但是需要为script指定defer属性，并且要包含在一个有作用域的元素内。2、大多数浏览器都可以通过innerHtml直观的添加css式样。
```
div.innerHTML="<style type =\"text/css\" >body{background-color:red;}</style>";
```
outerHTML:类型与innerHTML，唯一不同的是，在写模式下，会将调用元素也替换掉。
insertAdjacentHTML():在指定位置插入HTML文本，第一个参数必须为：
1. beforebegin：在当前元素之前插入一个相邻的同辈元素
2. afterbegin：在当前元素之后或者在第一个子元素之前
3. beforeend：在当前元素之下或者在最后一个子元素之后再插入
4. afterend：在当前元素之后插入一个相邻的同辈元素。

关注