JavaScript之DOM扩展

最新推荐文章于 2023-01-05 18:21:57 发布

「已注销」

最新推荐文章于 2023-01-05 18:21:57 发布

阅读量359

点赞数

分类专栏： Javascript学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/70701847

版权

这篇博客探讨了JavaScript中的DOM扩展，包括选择符API的querySelector()和querySelectorAll()，元素遍历的方法如firstElementChild和classList属性的使用。还详细介绍了HTML5中的新特性，如与类相关的扩充，document.getElementsByClassName()，classList的各种操作方法，以及焦点管理和HTMLDocument的变化，如readyState属性，兼容模式，字符集属性等。此外，还提到了插入标记的方法如innerHTML和outerHTML，并警告了使用这些方法时可能影响性能的问题，最后介绍了insertAdjacentHTML()方法的不同插入位置。

摘要由CSDN通过智能技术生成

DOM扩展

尽管现在DOM已经很完善了。但为了实现更多、更复杂的功能，仍然会有一些标准或专有扩展被纳入W3C标准中。现在DOM主要有两个扩展：selector API（选择符API）和HTML5。

选择符API

在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。事实上，现在所有的浏览器厂商都提供了querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点

querySelector()

该选择符接收一个CSS选择符，返回与该模式相匹配的第一个元素（与该模式匹配的可能有多个元素，但只返回第一个）,如果没有匹配的元素，则返回null。它的查找方式与传统的查找方式一样。

比如：根据ID来选择一个元素，先用传统的方法获取该元素：

var myDiv = document.getElementById("myDiv");

现在，使用querySelector()来获取该元素：

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

通过元素本身，来获取该元素，用传统的方法：

var div = document.getElementsByTagName("div");

这样可以获取所有的div元素，但是想要这其中的第一个div，则需要这样：

var div = document.getElementsByTagName("div")[0];

现在，使用querySelector()来获取第一个与模式匹配的元素：

var div = document.querySelector("div")

同样的，也可以获取类名为selected的第一个元素（因为类名selected的元素可以有很多）：

//取得类为selected的第一个元素
var selected = document.querySelector(".selected");

注：通过Document类调用querySelector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类调用querySelector()调用时，会在当前元素的子元素范围内查找匹配的元素。

querySelectorAll()

与querySelector()相类似的用法， querySelectorAll()是返回与模式相匹配的所有元素。它返回的是一个nodeList类，类似数组一样，如果没有匹配的元素，则返回一个空的nodeList。比如，用document.getElementsByTagName()方法是返回与模式匹配的所有元素，通过querySelectorAll()也可以达到相同的效果。

注：querySelectorAll()返回的是带有属性和方法的NodeList，它的低层其实是DOM结构的一种快照，而不像NodeList是动态地查询DOM结构，这样就避免了使用NodeList引起的性能问题。

比如，页面中有多个div元素，要获取这所有的div元素，有两种方法：

//第一种方法获取所有的div元素
var div = document.getElementsByTagName("div");

//第二种方法获取所有的div元素
var div = document.querySelectorAll("div");

在上述例子中，无法体现 querySelector()和 querySelectorAll()的强大，但在一个复杂的页面中，获取更为深层的某元素，用传统的通过ID、TagName、name来获取是很复杂的，而通过querySelector()等来获取就简单很多。

元素遍历

在DOM章节中，我们学过childNodes、firstChild以及lastChild这三个属性，分别是获取元素节点下的所有子节点、获取元素节点下的第一个子节点、获取元素节点下的最后一个子节点。但在这里有一个问题，就是除了IE9及以前的浏览器，其它的主浏览器都会“承认”元素之间的空格，也就是说会返回空文本节点（浏览器将元素之间的空白看作是文本节点），这是一个不友好的事情。

例如：

<!doctype html>  
<html lang="zh-en">  
  <head>  
    <meta charset="utf-8">  
    <title>JavaScript</title>  
  </head>  
  <body>  
    <ul id="ul_list">
      <li>PHP</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  <script> 
      //通过ID获取ul元素
      var ul = document.querySelector("#ul_list");
      //获取ul下的所有子节点
      var childNodes = ul.childNodes;
      console.log(childNodes.length);
      //获取ul下的第一个子节点
      var firstChild = ul.firstChild;
      console.log(firstChil