JavaScript——DOM扩展

栏目: CSS · 发布时间: 6年前

内容简介:来自javascript高级程序设计的第十一章Selectors API和HTML 5.Selector API.

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)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

组合数学

组合数学

(美)Richard A. Brualdi / 冯速 等 / 机械工业出版社 / 2012-5 / 69.00元

本书是系统阐述组合数学基础、理论、方法和实例的优秀教材,出版三十多年来多次改版,被MIT、哥伦比亚大学、UIUC、威斯康星大学等众多国外高校采用,对国内外组合数学教学产生了较大影响,也是相关学科的主要参考文献之一。 本书侧重于组合数学的概念和思想,包括鸽巢原理、计数技术、排列与组合、P條ya计数法、二项式系数、容斥原理、生成函数和递推关系以及组合结构(匹配、试验设计、图)等,深入浅出地表达了......一起来看看 《组合数学》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具