JavaScript

JavaScript——DOM扩展

Posted by Csming on 2018-09-24

DOM扩展

来自javascript高级程序设计的第十一章

Selectors API和HTML 5.

选择符 API

Selector API.

querySelector()方法

querySelector()方法接收一个CSS选择符，返回该模式匹配的得一个元素，若找不到匹配元素则返回null。

var body = document.querySelector("body");

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

var selected = document.querySelector(".selected");

var img = document.body.querySelector("img.button");

querySelectorAll()方法

querySelectorAll()方法接收一个CSS选择符，返回该模式匹配的所有元素的NodeList。若找不到匹配的元素则返回空的NodeList。

matchesSelector()方法

matchesSelector()方法接收一个CSS选择符，若的调用元素与该选择符匹配，则返回true，否则返回fale；

if (document.body.matchesSelector("body.page1")){
  // true
}

元素遍历

Element Traversal API为DOM元素添加了一下5个属性：

1.childElementCount: 返回子元素的个数。
2.firstElementChild: 指向第一个子元素。
3.lastElementChild: 指向最后一个子元素。
4.previousElementSibling: 指向前一个同辈元素。
5.nextElementSibling: 指向后一个同辈元素。

HTML5

与类相关的扩充

1.getElementsByClassName(): 可以通过document对象及所有HTML元素调用该方法。

2.classList属性

焦点管理

1.document.activeElement属性： 该属性会引用DOM中当前获得了焦点的元素。

元素获得焦点的方式有页面加载、用户输入和在代码中调用focus()方法。

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

2.document.hasFocus(): 用于确定文档是否获得焦点。

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

HTMLDocument的变化

1.readyState: loading, 正在加载文档。complete, 已经加载完文档。

2.兼容模式: compatMode属性

该属性告诉开发人员浏览器采用了哪种渲染模式。

if(document.compatMode == "CSS1Compat") {
  // 标准模式
} else if("BackCompat"){
  // 混杂模式
}

3.head属性

引用文档的<head>元素。

字符集属性

1.document.charset

2.document.defaultCharset

自定义数据属性

H5规定，要为元素添加非标准的属性，要添加前缀data-;

然后自定义属性的值可以通过dataset属性来访问。dataset属性是DOMStringMap的一个实例。

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

var appId = div.dataset.appId;
var myName = div.dataset.myname;

div.dataset.appId = 23456;

插入标记

1.innerHTML属性: 该属性放回与调用元素的所有子节点对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

2.outerHTML属性: 在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树。然后用这个DOM子树完全替换调用元素。

3.insertAdjacentHTML()方法: 传入参数：插入位置、要插入的HTML文本。

插入位置：beforebegin、afterbegin、beforeend、afterend。

4.内存及性能问题： 以上述方法替换子节点可能会导致浏览器的内存占用问题。

scrollIntoView()方法

该方法可以滚动浏览器窗口或某个容器元素。

若将true传入该方法，或者不传入任何参数，则窗口滚动后会让调用元素的顶部与视口顶部尽可能平齐。

若传入false，调用元素会尽可能全部出现在视口中。

专有扩展

没有被写入标准的扩展

文档模式

IE8引用的一个新概念叫：文档模式

页面的文档模式决定了可以使用什么功能。

我觉得这个是IE特有的东西，所以不准备详细记录他了。

children属性

children属性是IE9为了处理与其他浏览器在处理文本节点中的空白符有差异的问题而诞生的。

contains()方法

IE中引入了该方法用于判断某个节点是不是另一个节点的后代。

插入文本

IE中的两个插入文本的属性

1.innerText

2.outerText

滚动

1.scrollIntoViewIfNeeded(alignCenter)

2.scrollByLines(lineCount)

3.scrollByPages(pageCount)

FEATURED TAGS
JavaScript
FRIENDS