JS--DOM拓展

关于DOM的内容实在是太丰富了,前面我们简单的介绍了DOM中关于DOM特性和内容还有DOM节点相关的知识点。其实主要的就是关于DOM1级的主要概念:其将HTML或XML形象的看成是一个层次化的节点树,可以通过JavaScript操作这个节点树,进而改变其外观和结构。接下来进一步拓展一下DOM相关的内容。

一、选择符拓展

以下的方法可以通过Document和Element类型的实例调用他们。

(1)document.querySelector(),level1,该方法接受一个CSS选择符,返回该模式匹配的第一个元素。如果没有则返回null。如果传入不被支持的CSS选择符则会报错。

(2)document.querySelectorAll(),level1,该方法和上面方法接受的参数是一样的,但是返回的不仅是一个元素,返回的是一个NodeList实例。具体来说,返回的值是带有所有属性和方法的NodeList。返回的仅仅是NodeList的快照,并不是动态查询的,这样避免了常见的性能问题。

(3)matchesSelector(),level2,该方法是level2级别的方法,是为Element类型新增的一个方法。这个方法接受一个参数(CSS选择符),如果调用元素和该选择符匹配则返回TRUE,否则返回FALSE。注意,该方法在很多浏览器上并未实现,注意使用。

二、元素遍历拓展

之前关于获得某个元素的子节点提供了一些方法,例如firstChild,lastChild,childNodes。关于节点之间的空格在IE9之前是不会当做文本节点返回的,但是在其他的浏览器中会当做一个文本节点返回。这样就导致了一些兼容性问题。接下来提供了一些新的方法可以使用,这样可以避免空白文本节点:

(1)childElementCount,返回子元素的个数,不包括文本节点和注释节点。

(2)firstElementChild,指向的是第一个子元素,是firstChild的元素版。

(3)lastElementChild,指向的是最后一个子元素,是lastChild的元素版。

(4)previousElementSibiling,指向前一个同辈元素,是previousSibling的元素版。

(5)nextElementSibling,指向是下一个同辈元素,是nextSibling的元素版。

三、HTML5关于DOM的拓展

(1)getElementsByClassName(),该方法可以通过所有的HTML元素或者document对象进行调用。该方法接受一个参数,即一个包含一个或者多个类名的字符串,返回带有指定类的所有NodeList,传入多个类时,顺序不重要。

(2)classList属性,所有元素都具有这个属性,这个也是一个类数组,具有length属性可以通过item()方法进行访问。此外该属性还有以下方法:(支持该属性的浏览器貌似有FF3.6和chrome)

add(value) :将给定的value添加到列表中,如果存在则不添加。

contains(value):表示列表中是否存在value,如果存在则返回TRUE,否则返回FALSE。

remove(value):从列表中删除给定的value 。

toggle(value): 如果列表中有value则删除,如果没有的话则添加。

------华丽的分割线-------

四、焦点管理

(1)document.activeElement属性,这个属性始终会引用DOM中当前获得了焦点的元素。默认情况下,当文档加载完毕后,该属性中保存的是document.body元素。在加载期间其值为null。

(2)document.hasFocus()方法,该方法用来确定文档或者元素是否获得了焦点。通过这个方法可以判断用户是否正在和页面进行交互操作。

五、HTMLDocument新变化

(1)document.readyState属性:该属性可以用来判断文档是否加载完成,其有两个值。第一,loading表示正在加载文档。第二,complete表示已经加载完成文档。

(2)document.compatMode属性:可以用来检测页面的模式是标准模式还是混杂模式,在标准模式下该属性的值为'CSS1Compat',在混杂模式下该属性的值为'BackCompat'。

(3)document.head属性:该属性是对文档中<head>元素的引用。因为实现的浏览器并不多可以通过兼容写法:document.head || document.getElementsByTagName('head')[0]

六、自定义数据的属性

我们知道在HTML5中可以为元素添加自定义属性,其格式为data-name的格式,name是自己进行命名的。

(1)element.dataset属性:我们可以通过元素获得dataset属性,该属性包括的是自定义属性的一个键值对,是一个DOMStringMap的实例。例如:

var box = document.getElementById('id');

var appid = box.dataset.appid;//取得属性为data-appid的值

box.dataset.appid = 12345; //设置自定义属性data-appid的值。

七、专有扩展

(1)文档模式:在IE8中引入这个概念表示页面可以用什么级别的CSS,可以用JavaScript的哪些API。要强制浏览器已某种模式进行渲染,可以使用HTTP头部信息X-UA-Compatible或者通过等价的meta头部进行设置。

(2)children属性:之前关于处理文本节点中的空白有差异,这里出现了children属性,这个属性也是HTMLCollection的实例。只包含元素中同样还是元素的节点。

(3)contains()方法:该方法可以判断某个节点是不是另一个节点的后代。IE是第一个引入该方法的。调用该方法的应该是祖先节点。接受的参数是检测的后代节点。如果检测到了返回TRUE否则返回FALSE。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容