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)


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

查看所有标签

猜你喜欢:

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

商业的常识

商业的常识

申音 / 山西经济出版社 / 2011-7-1 / 35.00元

★为什么美国没有史玉柱,中国没有乔布斯? ★什么是“对的行业”、“错的行业”? ★我们需要什么样的营销? ★老板为什么要读商学院? ★山寨公司还需要管理吗? ★资源问题是个“伪问题”? ★别把商业模式当成葵花宝典 ★给海归技术创业兄弟的九个忠告 ★在一个不伟大的行业里,做一个伟大的公司 ★是什么让互联网遭遇了有史以来最鸡犬不宁的一战?一起来看看 《商业的常识》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试