先贴一个使用的小技巧:
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元素也可以获得这些函数:
{
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的库,由Jason Karl Davis编写的为两个不支持HTMLElement的浏览器提供了访问HTMLElement的方法。[查看]
但是我将这个脚本包含进去之后在IE中仍然不能使用HTMLElement。本人愚笨,没看懂代码,虽然仅仅是请问有谁知道是怎么才能正确使用那个库吗?
根元素<html>:document.documentElement
标准DOM方法
源于两个强大的函数 getElementById 与 getElementsByTagName (注意Element单词的单复数)
可以按以下的封装方法方便地获取元素:
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》)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
通过类名查找元素
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。
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函数,所以我们只能……
return elem.getAttribute(name) != null ;
};
其中有四个属性名称需要注意,在hasAttribute / getAttribute / setAttribute 这几个函数中没有什么特殊情况,但是在使用“.”选择器的时候就要注意了,这四个属性名分别是 class / for / float / text ,它们在“.”选择器时应使用的属性分别为 className / htmlFor / cssFloat / cssText ,原因是原单词都是JavaScript的保留字,如果我们用字符串的方式获取他们的话,就使用原单词可以了。我曾经因为className属性而让我感到绝望,我以为JavaScript中对html属性的获取是多么的困难,连属性名都要改!
获取和设置元素属性的值的通用函数(来自《精通JavaScript》)
// 确保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语义。