Javascript学习笔记（详）（五）——DOM拓展与事件

DOM扩展

选择符API

1. 核心方法：querySelector()和querySelectorAll()

2. querySelector()方法：

   接收一个CSS选择符，返回与该模式匹配的第一个元素

   //取得body元素
   var body = document.querySelector("body");
   //取得ID为"myDiv"的元素
   var myDiv = document.querySelector("#myDiv");
   //取得类为"selected"的第一个元素
   var selected = document.querySelector(".selected");
   //取得类为"button"的第一个图像元素
   var img = document.body.querySelector("img.button");
   

3. querySelectorAll()：

   接收一个CSS选择符，返回一个NodeList实例

   能够调用该方法的类型包括：Document、DocumentFragment和Element

   //取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
   var ems = document.getElementById("myDiv").querySelectorAll("em");
   //取得类为"selected"的所有元素
   var selecteds = document.querySelectorAll(".selected");
   //取得所有<p>元素中的所有<strong>元素
   var strongs = document.querySelectorAll("p strong");
   

   要取得NodeList中每一个元素，可以使用item()方法，也可以使用方括号语法

4. matchesSelector()：

   Element类型的方法。接收一个CSS选择符，如果调用元素与该选择符匹配，返回true,否则返回false

元素遍历

DOM元素添加的5个属性：

• childElementCount：返回子元素（不包括文本节点和注释）的个数。
• firstElementChild：指向第一个子元素；firstChild 的元素版。
• lastElementChild：指向最后一个子元素；lastChild 的元素版。
• previousElementSibling：指向前一个兄弟元素；previousSibling 的元素版。
• nextElementSibling：指向后一个兄弟元素；nextSibling 的元素版。

let i, len, child = element.firstElementChild;
while(child !== element.lastElementChild){
   
        processChild(child);
        child = child.nextElementSibling;
}

与类相关的扩充

1. getElementsByClassName()

   接收一个参数：包含一个或多个类名的字符串

   //取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
   var allCurrentUsernames = document.getElementsByClassName("username current");
   //取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
   var selected = document.getElementById("myDiv").getElementsByClassName("selected");
   

   在document对象上调用getELementByClassName()始终会返回所有与类名相匹配的元素，在元素上调用该方法就只会返回后代元素中匹配的元素

2. classList属性

   classList属性是新集合类型DOMTokenList的实例

   方法：

   • add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
   • contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
   • remove(value)：从列表中删除给定的字符串。
   • toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

   eg：div.classList.toggle("user");

3. 焦点管理：

   document.activeElement属性，始终会引用DOM中获得了焦点的元素，获得焦点的方式：页面加载，用户输入（通常是按Tab键）和在代码中调用fucus()方法

   var button = document.getElementById("myButton");
   button.focus();
   alert(document.activeElement === button); //true
   

   默认情况下，文档刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间值为null

   document.hasFocus()

   var button = document.getElementById("myButton");
   button.focus();
   alert(document.hasFocus()); //true
   

4. HTMLDocument

   1. readyState：

      • loading：正在加载
      • complete：已经加载完文档

   2. 兼容模式compatMode：

      • 标准模式：CSS1Compat
      • 混杂模式：BackCompat

   3. head:

      let head = document.head || document.getElementByTagName("head")[0]
      

5. 字符集属性：

   1. charset

      document.charset = "UTF-8";
      

   2. defaultCharset：根据默认浏览器及操作系统的设置，当前文档的默认字符集

6. 自定义数据属性：

   添加前缀data-

7. 插入标记：

   1. innerHTML：返回与调用元素的所有子节点对应的HTML标记（返回含在调用元素标记之间的字符串），若没有子代元素，将返回纯文本

   2. outerHTML：返回调用它的元素及其所有子节点的HTML标签

   3. insertAdjacentHTML()：接收两个参数：插入位置和要插入的HTML文本，第一个参数必须是以下值：

      • “beforebegin”，在当前元素之前插入一个紧邻的同辈元素；
      • “afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
      • “beforeend”，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
      • “afterend”，在当前元素之后插入一个紧邻的同辈元素。

      //作为前一个同辈元素插入
      element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
      

8. scrollIntoView()：滚动窗口：

   document.forms[0].scrollIntoView();
   

9. 专有拓展

   • 文档模式

   • children属性:HTMLCollection的实例：只包含元素中同样还是元素的子节点

   • contains()方法：如果传入的参数节点是后代节点则返回true

   • 插入文本：

     1. innerText属性：

        读取值：按照由浅入深的顺序将子文档树的所有文本都拼接起来。

        写入值：删除元素的所有子节点，插入包含相应文本值的文本节点

        过滤HTML标签：

        div.innerText = div.innerText;
        

     2. outerText属性

   • 滚动：

     • scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。如果将可选的alignCenter 参数设置为true，则表示尽量将元素显示在视口中部（垂直方向）。
     • scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。
     • scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。

事件

事件流

1. 事件冒泡：由内层向外层传播，直至传到document对象
2. 事件捕获：由外层向内层传播
3. DOM2级事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段

事件处理程序

响应某个事件的函数叫做事件处理程序（或事件侦听器）。事件处理程序的名字以on开头

1. HTML事件处理程序

   <input type="button" value="Click Me" onclick="alert('Clicked')"/>
   

   一些特殊符号要转义

   <script type="text/javascript">
       function say() {
         
           alert("hello world");
       }
   </script>
   <input type="button" value="Click Me" onclick="say()"/>
   

   <input type="button" value="Click you" onclick="alert(this.value)">
   

   <input type="button" value="Click you" onclick="alert(value)">
   

   <form method="post">
       <input type="text" name="username" value="">