• Selector API
  • HTML5 DOM扩展
  • Element Traversal规范
Selector API
众多JavaScript库中，最常用的一个功能就是根据css选择符选择与某个模式匹配的DOM元素
Selector API Level1的核心是两个方法：
querySelector、querySelectorAll
 
可以通过Document及Element的实例来调用他们。当使用Element调用时，首先会在整个文章中查询，然后取出在Element子节点中的元素返回。如果传入了不支持的选择符，会报错。
querySelectorAll（）方法返回的是一个NodeList的实例。能够调用这个方法的类除了DOcument与Element外，还包括DocumentFragment。
 
Selector API Level2规范为Element类型新增了一个matchesSelector（）方法。这个方法接收一个参数：css选择符。如果元素与选择符匹配则返回true，否则返回false。
element.matchesSelector(selector);            规范
element.msMatchesSelector(selector);        ie
element.mozMatchesSelector(selector);      ff
element.webkitMatchesSelector(selector);   webkit
 
Element Traversal API
IE9及之前版本不会返回文本节点，而其他浏览器都会返回文本节点，导致了firstChild和childNodes的不一致。新出的traversal 规范为：
  • childElementCount
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling
 
HTML5 DOM扩展
getElementsByClassName() ，Document或Element类型可以使用，返回的是一个NodeList的实例。Ie9+支持
calssList属性
在操作类名时，需要通过className属性添加删除。一般做法是为className前后加上一个空格，对要增加或删除的类座同样处理，然后进行字符串的拼接，删除，替换工作；成功后删除className首尾的空格。
HTML5中为所有元素新增的classList属性。包含以下方法：
add、contains、remove、toggle
焦点管理
HTML5添加了辅助管理DOM焦点的功能。document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。元素获取焦点的方式有页面加载、用户输入、在代码中调用了focus方法。
默认情况下，文档刚加载完时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement为null.
所有浏览器都支持该属性。
HTMLDocument的变化。
1、readyState属性
document.readyState属性，两个可能值：loading、complete
2、兼容模式：document.compatMode；正常模式“CSS1Compat”混杂模式“BackCompat”
3、head属性：head = document.head || document.getElementsByTagName("head")[0]   （webkit浏览器实现）
4、自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加“data-”前缀。这些属性可以任意添加、随便命名，只要以data-开头即可。添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。
5、标记与文本
innerHTML、outerHTML；innerText、outerText都是IE的自定义属性，后来innerHTML与outterHTML被纳入规范。
读模式下，innerHTML属性返回调用元素的所有子节点的html标记；写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素的所有子节点。
不要指望所有浏览器的innerHTML返回的值都相同。
使用innerHTML替换元素字节点时，要将当前元素子节点中的JavaScript属性和事件处理程序都删除，防止内存泄露。innerHTML中不要script和style标签，这两者不会生效。
并不是所有的浏览器都支持innerHTML，比如<html>、<head><style><title>，<table>相关标签。为这些元素设置innerHTML时，最好换一种方式：先清空元素，然后将innerHTML转化成dom节点，插入到元素中。
6、insertAdjacentHTML（）方法
两个参数：插入位置和要插入的html文本。插入位置：
beforebegin、afterbegin、beforeend、afterend这些值必须是小写形式
7、scrollntoView
element.scrollIntoView（）某元素滚动到视口。
 
专有扩展
文档模式：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">使用最新版本渲染
children属性
这个属性是HTMLCollection的实例，只包含元素总同样还是元素的子节点。IE8及更早之前的版本还会包含注释节点，IE9修复了这个问题。
contains（）方法
判断一个元素是不是另一个元素的子节点。IE、ff、chrome都支持。
插入文本
innerText读取时，会按照由浅入深的顺序，将子文档树种的所有文本拼接起来。写入时，会删除所有子节点，插入包含相应文本值的文本节点。
ff不支持这个属性，但支持textContent。
所以在设置innerText或者textContent时，最好先清空子节点，然后使用document.createTextNode()创建文本节点插入。
该方法会对字符串中红的文本进行转义，比如：<p>test</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

DOM扩展札记的更多相关文章

  1. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  2. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  3. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  4. 11. javacript高级程序设计-DOM扩展

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  5. js-DOM，DOM扩展

    DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

  6. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  7. JavaScript基础笔记（八）DOM扩展

    DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...

  8. DOM扩展：DOM API的进一步增强[总结篇-上]

    DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DO ...

  9. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

随机推荐

  1. 总结下用Vue.js和webpack遇到的问题

    这段时间用vue.js+webpack做一个单页应用的demo,第一次尝试模块化,技术水平有限,学习不够深入,总是遇到各种问题,所谓前事不忘后事之师,so记录下. 1.ES6匿名函数里面this值 结 ...

  2. easyui自定义标签 datagrid edit combobox 手动输入保存不上问题解决办法

    使用onEndEdit事件(该事件可以获取到editor对象,onAfterEdit事件获取不到Editor对象) 通过editor拿到输入数据并保存. int ci = 0; for(Column ...

  3. Mac 下安装ruby,以及CocoaPods安装以及使用网摘

    ruby安装网址:https://ruby-china.org/wiki/install_ruby_guide CocoaPods安装和使用教程地址:http://code4app.com/artic ...

  4. CAD 二次开发----- 块（一）

    1.块定义与块参照两个概念 块定义类似于模具,而块参照类似于模具浇筑出来的模型,在图形中只需用块定义来保存块的实际几何组成,而仅用插入点和比例因子来存储块定义,因为块参照的几何形状与快参照完全一样,仅 ...

  5. 【转】linux yum命令详解

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  6. Struts2之提交对象数组至后台

    struts2中有许多很好的特性,比如在设置好getter和setter方法后,加上前端的匹配设置,后台即可自动将前端输入的数据转换为后台的相应的对象. 如现在传入一个Person类的对象,其中Per ...

  7. （bzoj2330）糖果

    2330: [SCOI2011]糖果 Time Limit: 10 Sec  Memory Limit: 128 MB Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋 ...

  8. doxygen的使用（一）配置并生成文档

    原创文章,欢迎阅读,禁止转载. doxygen是个好用的文档生成工具,他的强大功能有很多介绍,我就不说了.自带的chm帮助手册很全面,包括功能.注释规范.怎么配置.工具用法等.doxygen的用法共3 ...

  9. vs2010的“应用程序向导”新建MFC程序报错“当前页面的脚本发送错误”

    原创文章,欢迎阅读,禁止转载. 问题现象不知道从什么时候开始,我的vs2010不能新建MFC程序了,报错如图:... 解决方法根据提示排查,发现是应用程序向导的相关html被损坏了.从同事电脑上把   ...

  10. yeoman（转）

    前言有一种技术可以提高我们的工作效率,可以让我们专心做我们擅长的事,可以屏蔽复杂性,可以规范我们的架构和我们的代码,可以让我们的享受编程的乐趣.Yeoman可以做到. 很多年以前,rails刚刚出世, ...