javascript高级程序设计 第十一章--DOM扩展

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript高级程序设计 第十一章--DOM扩展相关的知识,希望对你有一定的参考价值。

          javascript高级程序设计 第十一章--DOM扩展
DOM最主要的扩展就是选择符API、html5和Element Traversal
  Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得
元素。querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参
数一样,但是返回NodeList实例; matchesSelector()方法返回布尔值。 元素遍历:处理元素间的空格或者空
白文本节点
  Element Traversal :为DOM元素定义了额外的属性,能够方便地从一个元素跳到另一个元素。
  HTML5:为标准的DOM定义了很多的扩展功能。与类相关的扩充:新增了getElementsByClassName()方法,
返回与类名匹配的所有元素,新增了操作类名的classList属性,用于添加、删除或替换类名。
  焦点管理: document.activeElement属性,这个属性始终会引用DOM中当前获得了叫焦点的元素,新增了
document.hasFocus()方法用于确定文档是否获得了焦点。 HTMLDocument的变化:Document的readyState
属性,loading表示正在加载的文档,complete表示已经加载完成的文档,通过它来实现一个指示文档已经加载
完成的指示器;兼容模式,document.compatMode属性在标准模式下返回“CSS1Compat”,在混杂模式下
返回“BackCompat”;新增了document.head属性 字符集属性:charset和defaultCharset这两个属性
可以得到文档使用的字符编码的具体信息 自定义数据属性:添加 data-前缀可以添加任意命名的属性,
通过元素的dataset属性来访问自定义属性的值。
  插入标记:innerHTML属性:在读模式下,innerHTML属性返回与调用元素的所有子节点对应的HTML标记。
 在写模式下,innerHTML属性会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的
所有子节点。outerHTML:在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签,在写模式
下,outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。
如: div.outerHTML="<p>this is a p</p>" 相当于 var p=document.createElement("p"); p.appendChild
(document.createTextNode("this is a p")); div.parentNode.replaceChild(p,div); 新创建的额<p>元素会取代
DOM树中所有的<div>元素。 insertAdjacentHTML()方法,接收两个参数,插入的位置和要插入的HTML文
本,第一个参数必须是:beforebegin afterbegin beforeend afterend
scrollIntoView()方法:这个方法用来控制页面滚动,这个方法可以对所有HTML元素使用,通过滚动浏览器窗口
或某个容器元素,调用元素就可以出现在视口中。 children属性:指包含元素中同样还是元素的子节点,与
childNodes的值相同, element.children contains()方法:用来检测节点是不是某个节点的后代节点,返回
布尔值,alert(document.documentElement.contains(document,body)); 这个例子检测<body>元素
是否为<html>元素的后代,返回true。 插入文本的innerText属性:通过innerText属性可以操作元素中包含的
所有文本,包含子文档树中的文本。innerText属性读取值的时候,将子文档树中的所有文本拼接起来;写入值
的时候,会删除元素的所有子节点,插入包含相应文本值的文本节点。设置innerText属性移除了先前存在的所有
子节点,完全改变了DOM子树,同时也会对HTML的语法字符重新编码; outerText属性:与innerText属性
不同的是, outerText属性在写模式下,不只是替换调用它的元素子节点,而是会替换整个元素。例子:
div. outerText="hello world"; 相当于 var text = document.createTextNode("hello world");
div.parentNode.replaceChild(text,div)



































以上是关于javascript高级程序设计 第十一章--DOM扩展的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 进阶第十一章(正则表达式)(完结)

JavaScript DOM编程艺术-学习笔记(第十章第十一章)

第十一章

js-JavaScript高级程序设计学习笔记7

构建之法阅读笔记08-第十一章

构建之法第十一章读后感