JavaScript DOM笔记:获取及操作元素

 

 

先贴一个使用的小技巧:

temp1 = document.getElementById('id1'); temp2 = document.getElementById('id2'); which = temp1 || temp2;

 

如果temp1元素存在,则which指向temp1,否则which指向temp2。

 

 

五个指针:parentNode, previousSibling, nextSibling, firstChild, lastChild

 

 

三种节点:

元素节点,文本节点(如果存在任何空白符,也被认作文本节点),文档根元素()

可以通过检查节点的nodeType属性确定节点类型:{1:document.ELEMENT_NODE:元素,3:document.TEXT_NODE:文本,9:document_NODE:根元素}

 

由于文本节点会引起混乱使得我们很难准确地定位,因此在获取元素节点的时候应该过滤文本节点。一种好而直观的实现方案是,为HTMLElement的原型绑定相应函数,由于原型继承每个HTML DOM元素也可以获得这些函数:

 

HTMLElement.prototype.prev = function () {     var elem = this;     do {         elem = elem.previousSibling;     } while( elem && elem.nodeType != 1);     return elem; };

 

用类似以上的方法定义first, next, prev, last等函数可以在Firefox、Safari和Opera上获得成功,但却不能在IE上实现,原因是IE不支持HTMLElement!!(IE真是太烦人了)。

 

据说现在有一个可以直接使用HTMLElement的库,由编写的为两个不支持HTMLElement的浏览器提供了访问HTMLElement的方法。[]

但是我将这个脚本包含进去之后在IE中仍然不能使用HTMLElement。本人愚笨,没看懂代码,虽然仅仅是请问有谁知道是怎么才能正确使用那个库吗?

 

 

根元素<html>:document.documentElement

 

 

标准DOM方法

 

源于两个强大的函数 getElementById 与 getElementsByTagName (注意Element单词的单复数)

可以按以下的封装方法方便地获取元素:

 

function id(name) {     return document.getElementById(name); }function tag(name, elem) {     return (elem || document).getElementsByTagName(name); }

 

需要注意的是,getElementsByTagName返回一个节点NodeList。该结构跟普通的JavaScript数组相似,但是不支持push(), pop(), shift()等方法。

 

 

DOM加载:浏览器渲染和操作顺序

 

1.HTML解析完毕

2.外部脚本和样式表加载完毕

3.脚本在文档内解析并执行

4.HTML DOM完全构造起来

5.图片和外部内容加载

6.网页完成加载

 

基于这个顺序,我们会发现如果在DOM完全加载之前使用DOM可能会发生错误(这个可能是很多初学者曾遇到的问题),而如果用onload加载函数又必须等待图片、视频等元素的加载,造成无法运行JavaScript。

 

 

监听DOM加载状态

 

这项技术在不堵塞浏览器加载的情况下尽可能快地检查HTML DOM文档是否已经加载了执行所必须的属性。

document

document.getElementById

document.getElementsByTagName

document.body

检查这几个对象可以获知DOM的加载状态

 

以下代码监听DOM何时加载完毕(来自《精通JavaScript》)

}

 

 

通过类名查找元素

 

function hasClass(name, type) {     var r = [];     var re = new RegExp("(^|\\s)" + name + "(\\s|$)");     var e = document.getElementsByTagName(type || "*");     for (var j = 0; j < e.length; j++)         if (re.test(e[j].className))             r.push(e[j]);     return r; }

 

 

其他元素获取方法:cssQuery、jQuery、XPath

 

 

获取元素内文本

 

所有 非 基于Mozilla的浏览器中都有一个叫作innerText的属性可以调用。但是对于Mozilla浏览器和XML文档却不奏效。解决方法是获取nodeValue。

 

function getText(e) {     var t = '';     e = e.childNodes || e;     for (var i = 0; i < e.length; i++) {         t += e[i].nodeType != 1 ? e[i].nodeValue : getText(e[i].childNodes);     }     return t; };

 

 

innerHTML

 

所有的主流浏览器都实现了innerHTML属性,但是因为没有统一标准,所以或多或少会有一些怪异的bug

 

1.基于Mozilla的浏览器在innerHTML声明中并不回会返回<style>元素;

2.IE返回的元素字符都是大写的;

3.innerHTML作为一个只能用在HTML DOM文档的元素中的属性,若在XML DOM文档中使用的话只会返回null值。

 

 

另外有两个outer××的属性,但是貌似只有IE支持。摒弃……

 

 

hasAtrribute函数

 

IE不支持hasAtrribute这样常用的函数,但是支持getAtrribute函数,所以我们只能……

function hasAttribute(elem, name) {     return elem.getAttribute(name) != null; };

 

其中有四个属性名称需要注意,在hasAttribute / getAttribute / setAttribute 这几个函数中没有什么特殊情况,但是在使用“.”选择器的时候就要注意了,这四个属性名分别是 class / for / float / text ,它们在“.”选择器时应使用的属性分别为 className / htmlFor / cssFloat / cssText ,原因是原单词都是JavaScript的保留字,如果我们用字符串的方式获取他们的话,就使用原单词可以了。我曾经因为className属性而让我感到绝望,我以为JavaScript中对html属性的获取是多么的困难,连属性名都要改!

 

 

获取和设置元素属性的值的通用函数(来自《精通JavaScript》)

 

function attr(elem, name, value) {     //确保name是正确的    if (!name || name.constructor != String)         return '';          //检查name是否处在怪异命名的情形中(这句写得很精美)    name = { 'for''htmlFor''class''className' }[name] || name;          //如果用户传入了value参数的话,那么    if (typeof value != 'undefined') {         //首先使用快捷方式        elem[name] = value;         //可以的话,使用setAtrribute        if (elem.setAttribute)             elem.setAttribute(name, value);     }          //返回属性值    return elem[name] || elem.getAttribute(name) || ''; }

 

 

***添加与获取自定义属性

 

可以自己增加一个新的属性然后再次获取,不必理会这个属性是否具有其html语义。

 

 

 

22人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册