乐趣区

关于javascript:javascript高级程序设计读书笔记八

又是一个很多人都已沉沉睡去的夜晚,我又掀开电脑开始啃书了。
孔子曰:“温故而知新_,能够为师矣。”

富丽的分割线 ————- 让咱们开始吧 ———————-

第 11 章 DOM 扩大

Selectors API 是由 W3C 发动制订的一个规范,致力于让浏览器原生反对 CSS 查问。它的外围是两个办法:querySelector()和 querySelectorAll()

querySelector()办法:承受一个 CSS 选择符,返回与该模式匹配的第一个元素,如果没有返回 null。
querySelectorAll()办法接管的参数与 querySelector()办法一样,然而返回的是所有匹配的元素而不仅仅是一个元素。这个办法返回的是一个 NodeList 的实例。

var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var ems = document.getElementById("myDiv").querySelectorAll("em");
var selecteds = document.querySelectorAll(".selected");

通过 Document 类型调用 querySelector()办法时,会在文档元素的范畴内查找匹配的元素。而通过 Element 类型调用 querySelector()办法时,只会在该元素后辈元素的范畴内查找匹配的元素。

getElementsByClassName()办法,返回带有指定类的所有元素的 NodeList。

var allCurrentUsernames = document.getElementsByClassName("username current");
var selected = document.getElementById("myDiv").getElementByClassName("selected");

classList 属性,是 HTML5 新增的一种操作类名的形式。

div.classList.remove("disabled");  // 删除 "disabled" 类
div.classList.add("current");      // 增加 "current" 类
div.classList.toggle("user");      // 切换 "user" 类,如果列表存在给定的值,删除它;如果列表中没有给定的值,增加它。

反对 classList 属性的浏览器有 Firefox3.6+ 和 Chrome。

焦点治理:首先就是 document.activeElement 属性,这个属性始终会援用 DOM 中以后取得了焦点的元素。
元素取得焦点的形式有页面加载、用户输出(通常按 Tab 键)和在代码中调用 focus()办法。

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

默认状况下,文档刚刚加载实现时,document.activeElement 中保留的是 document.body 元素的援用。文档加载期间,document.activeElement 的值为 null。

另外就是新增了 document.hasFocus()办法,这个办法用于确定文档是否取得了焦点。

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

通过检测文档是否取得了焦点,能够晓得用户是不是正在与页面交互。
查问文档获知哪个元素取得了焦点,以及确定文档是否取得了焦点,这两个性能最重要的用处是进步 Web 利用的无障碍性。
无障碍 Web 利用的一个次要标记就是失当的焦点治理,而确切地晓得哪个元素取得了焦点是一个极大的提高。

readState 属性有两个可能的值:loading- 正在加载文档,complete- 曾经加载完文档。
应用 document.readyState 的最失当形式,就是通过它来实现一个批示文档曾经加载实现的指示器。

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

HTML5 规定能够为元素增加非标准的属性,但要增加前缀 data-,目标是为元素提供与渲染无关的信息,或者提供语义信息。
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
增加了自定义属性之后,能够通过元素的 dataset 属性来拜访自定义属性的值。

var div = document.getElementById("myDiv");
var appId = div.dataset.appId;  // 获得自定义属性的值
var myName = div.dataset.myname;
div.dataset.appId = 23456;   // 设置值
div.dataset.myname = "Micheal";
if(div.dataset.myname){alert("Hello," + div.dataset.myname);
}

插入标记 -innerHTML 属性
在读模式下,innerHTML 属性返回与调用元素的所有子节点(包含元素、正文和文本节点)对应的 HTML 标记。
在写模式下,innerHTML 会依据指定的值创立新的 DOM 树,而后用这个 DOM 树齐全替换调用元素原先的所有子节点。
不同浏览器返回的文本格式会有所不同,IE 和 Opera 会将所有标签转换为大写模式,而其余的会返回本来的格局。
应用 innerHTML 属性也有一些限度。比方,在大多数浏览器中,通过 innerHTML 插入 <script> 元素并不会执行其中的脚本。如果想插入这段脚本,必须在后面增加一个 ” 有作用域的元素 ”,能够是一个文本节点,也能够是一个没有完结标签的元素如 <input>。
div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>"; // 不举荐

插入标记 -outerHTML 属性
在读模式下,outerHTML 返回调用它的元素及所有子节点的 HTML 标签。
在写模式下,outerHTML 会依据指定的 HTML 字符串创立新的 DOM 子树,而后用这个 DOM 子树齐全替换调用元素。

插入标记 -insertAdjacentHTML()办法
insertAdjacentHTML() 办法接管两个参数:插入地位和要插入的 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>");   // 作为后一个同辈元素插入

留神:应用以上介绍的办法替换子节点,可能会导致浏览器的内存占用问题。
scrollIntoView()办法,通过滚动浏览器窗口或某个容器元素,调用元素就能够呈现在视口中。
如果传 true 作为参数,或不传,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传 false 作为参数,调用元素会尽可能全副呈现在视口中。顶部不肯定平齐。
document.forms[0].scrollIntoView(); // 让元素可见

children 属性:只蕴含元素中同样还是元素的子节点。除此之外,children 属性与 childNodes 没有区别,即在元素只蕴含元素子节点时,这两个属性的值雷同。

contains()办法,不通过在 DOM 文档树中查找即可取得这个信息,调用 contains()办法的应该是先人节点,也就是搜寻开始的节点。
alert(document.documentElement.contains(document.body)); //true 这个例子测试了 <body> 元素是不是 <html> 元素的后辈

退出移动版