开发者社区> 木的树> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

DOM扩展札记

简介:
+关注继续查看
  • 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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
人月神话札记:胸有成竹
人月神话札记:胸有成竹
0 0
人月神话札记:干将莫邪
人月神话札记:干将莫邪
0 0
人月神话札记:提纲挈领
人月神话札记:提纲挈领
0 0
人月神话札记:贯彻执行
人月神话札记:贯彻执行
0 0
人月神话札记:画蛇添足
人月神话札记:画蛇添足
0 0
人件札记:敞开心扉
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/48294571 前言:最近的招聘并不顺利,你知道,对于初创公司,在尽快时间找到能够并肩作战的朋友多么的重要,然而,这并不容易,作为一个管理者,我内心有一些焦虑,人们都说9月份是招聘旺季,反正我是没有感觉到。
627 0
人件札记:人血馒头
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/47447881 前言:相信鲁迅先生的《人血馒头》无人不知,血馒头可以拯救一个要死的命。
461 0
从0到1札记:进步的未来
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/46849083 前言:在京东上寻觅了很久,终于下手买下了《从0到1》这本书。
774 0
人月神话札记:祸起萧墙
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/45934271 前言:None love the bearer of bad news。
677 0
乖,摸摸头札记:杂草敏
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/44004065 前言:最近如饥似渴似得读各种书,IT管理类的、文学色彩的,却不愿用心去读技术学科的,比如说买的《第一行代码,Android》、《Java性能优化权威指南》,我知道自己在技术深度上还需要下很大的功夫,但总是找各种理由让自己错过阅读他们,而对文学色彩的书籍,却让我很想去阅读。
562 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
分身大师那些事
立即下载
分身大师那些事儿
立即下载
这些软技能,让程序员更幸福
立即下载