Js高程十一章 DOM扩展

11.1选择符API

1.querySelector()方法 接受一个css选择符

参考dom结构 :

  <div id="myDiv">
    <em class="uesrname current">e1</em>
    <em class="sel">e2</em>
    <em class="sel">e3</em>
  </div>
  <div class="selected"></div>
  <div class="selected"></div>
  <div class="button"><img src="https://csdnimg.cn/cdn/content-toolbar/csdnlogo.png" alt=" "></div>
  <p>
    <strong class="uesrname current">p1</strong>
    <strong class="selec">p2</strong>
    <strong>p3</strong>
  </p>

jQuery的核心就是通过 CSS 选择符查询 DOM 文档取得元素的引用，从而
抛开了 getElementById()和 getElementsByTagName()。

eg:

    let body = document.querySelector("body"),			//body
        myDiv = document.querySelector("#myDiv"),			//id
        selected = document.querySelector(".selected"),			//class
        img = document.querySelector("img.button")			//class为button下的img

通过 Document 类型调用 querySelector()方法时，会在文档元素的范围内查找匹配的元素。
通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。

2.querySelectorAll() 接受一个css选择符 但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例

    let ems = document.getElementById("myDiv").querySelectorAll("em"),
        //取得myDiv中所有em
        selectors = document.querySelectorAll(".selected"),
        //取得所有.selected类的元素
        strongs = document.querySelectorAll("p strong")
        //取得所有p中的strong

要取得返回的 NodeList 中的每一个元素
可以使用 item()方法 strongs.item(i)
或使用方括号语法 strongs[i]

3.matchesSelector (现为 matches) 检测是否有某元素

高程第三版编写时各大浏览器还未普遍支持该方法 由MDN上可知现在使用matches()方法检测

    let st = document.getElementsByTagName("strong")
    for (let i = 0; i < st.length; i++) {
      if (st[i].matches('.selec')) {
        alert(`st element has strong.selec is ${st[i].textContent} !`)
      }
    }

11.2.元素遍历

对于元素间的空格，IE9 及之前版本不会返回文本节点，
而其他所有浏览器都会返回文本节点，
Element Traversal 规范新定义了一组属性。
即在原有的属性中间加上element

eg:

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

11.3 HTML5新增API

1.getElementsByClassName()
好处：为带有某些类的元素添加事件处理程序

	//取得所有含有uesrname 和 current类 的元素
    let allCurrentUsername = document.getElementsByClassName("username currrent")
    //取得id为myDiv下的所有含有sel类的元素
    let selected = document.getElementById("myDiv").getElementsByClassName("sel")

调用这个方法时，只有位于调用元素子树中的元素才会返回。在 document 对象上调用
getElementsByClassName()始终会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后
代元素中匹配的元素。

classList

某DIV <div id=“test” class=“bd user disabled”></div>

    let div = document.getElementById("test")
    //删除user
    div.classList.remove("user");  //<div id="test" class="bd disabled"></div>
    //添加current
	div.classList.add("current")
	//切换user (如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它)
	div.classList.toggle("user")
	//确定是否含bd
	div.classList.contains("bd")
	//取得类名个数
	div.classList.length

IE10以上及各大浏览器现均以支持此属性

2.焦点管理
document.activeElement属性
此属性始终会引用 DOM 中当前获得了焦点的元素
比如页面加载、用户输入（通常是
通过按 Tab 键）和在代码中调用 focus()方法
eg:

    let button = document.getElementById("myButton")
    button.focus()
    alert(document.activeElement === button) //true
    alert(document.hasFocus()) //true 检测文档是否聚焦

3.readyState 有两个值：loading complete

if (document.readyState == "complete"){ 
 //document加载完成执行操作
}

判断页面标准或混杂模式

    alert(document.compatMode == 'CSS1Compat' ? "Standards" : "Quirks")

HTML5 新增了 document.head 属性

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

4.字符集属性document.charset 一般默认为UTF-16

defaultCharset 检测浏览器是否使用了自定义的字符集

    alert(document.charset != document.defaultCharset
     ? "Custom character being used." : "using defaultCharset")

5.自定义数据属性

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

var div = document.getElementById("myDiv")
//取得自定义属性的值
var appId = div.dataset.appId
var myName = div.dataset.myname
//设置值
div.dataset.appId = 23456
div.dataset.myname = "Michael"
//检测是否有此值
if(div.dataset.myname)

6.插入标记

innerHTML

<div id="content"> 
 <p>This is a <strong>paragraph</strong> with a list following it.</p> 
 <ul> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
 </ul> 
</div>

let cont = document.getElementById("content")
cont.innerHTML //返回整个div内所有元素
cont.innerHTML = "hello world" //将div内所有元素替换为文本hello world
cont.innerHTML = "Hello & welcome, <b>'reader'</b>"//"Hello & welcome, <b>'reader'</b>"

不同浏览器返回的文本格式会有所不同。IE 和 Opera 会将所有标签转换为大写形式
Safari、Chrome 和 Firefox 则会原原本本地按照原先文档中的格式返回 HTML

在IE8以前 插入<script> 和 <style>元素并不会执行其中的脚本和样式
要执行需要加defer属性 并在前加入一个前置元素
eg:

//script
div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>"
//style
div.innerHTML = "_<style type=\"text/css\">body {background-color: red; }</style>"; 
div.removeChild(div.firstChild);

不支持 innerHTML 的元素有：<col>、<colgroup>、
<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>和<tr>
IE8及以前 <title>也没有

outerHTML 读模式与innerHTML显示相同
写模式div.outerHTML = "<p>This is a paragraph.</p>";将div元素直接替换为p
Firefox7以前都不支持outerHTML

insertAdjacentHTML() args[0]为插入位置 args[1]为要插入的HTML文本

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>"); 
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>"); 
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>"); 
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

在删除带有事件处理程序或引用了其他 JavaScript 对象子树时，
就有可能导致内存占用问题
因此，在使用 innerHTML、
outerHTML 属性和 insertAdjacentHTML()方法时，
最好先手工删除要被替换的元素的所有事件处理
程序和 JavaScript 对象属性

11.4文档模式

要强制浏览器以某种模式渲染页面，可以使用 HTTP 头部信息 X-UA-Compatible，或通过等价的
<meta>标签来设置：
<meta http-equiv=“X-UA-Compatible” content=“IE=IEVersion”>
IEVersion 设置IE版本 Edge为最新版本
EmulateIE9: IE9 有文档声明则为IE9否则为IE5
9: IE9 忽略文档声明 强制IE9

2.contains() 检测节点是否为后代节点

document.documentElement.contains(document.body) //true body是html的子代

scrollIntoView() 默认参数为true 所有浏览器都支持 常用

//使用方法
div.scrollIntoView() //调用此方法时将div元素与顶部保持基本对齐
div.scrollIntoView(false) //与底部对齐

常用于在聊天对话时 将新消息实时显示在底部 与底部对齐