|
锁定老帖子 主题：javaScript DOM特性/方法
该帖已经被评为良好帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-04-27
最后修改：2008-12-04
❑ DOM的核心： Node Node.ELEMENT_NODE (1) Node.ATTRIBUTE_NODE (2) Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点 Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode Node.ENTITY_REFERENCE_NODE (5) Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点 Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点 Node.COMMENT_NODE (8) Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点 Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..> Node.DOCUMENT_FRAGMENT_NODE (11) Node.NOTATION_NODE (12) //DTD中的Nation定义 ❑ Node接口包含的特性/方法 var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);
❑ replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);
❑ 获得Node： /* 通过document对象 */ var oHtml = document.documentElement; /* 得到<head />和<body /> */ var oHead = oHtml.firstChild; var oBody = oHtml.lastChild; /* 可以用这种方式 */ var oHead = oHtml.childNodes[0]; var oBody = oHtml.childNodes[1]; /* 也可以使用方法获取数组的索引值 */ var oHead = oHtml.childNodes.item(0); var oBody = oHtml.childNodes.item(1); /* 使用document.body来得到<body /> */ var oBody = document.body; ❑ createElement(element)
❑ createTextNode() var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);
❑ cloneNode() var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);
这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。
❑ getElementsByName()
❑ getElementsByTagName() ❑ 生成与操作Node /*使用createElement(),createTextNode(),appendChild()动态添加节点*/
function createMessage(){
var op = document.createElement("p");
var oText = document.createTextNode("hello world!");
op.appendChild(oText);
document.body.appendChild(op);
}
❑ 使用createDocumentFragment() //通常做法
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}
//使用documentFragment
var arrText = ['first', 'second', 'third'];
var oFragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);
通过DocumentFragment的方式效率更高。
❑ HTML DOM：
附件是javascript dom 手册，可以方便查阅 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-04-29
w3school在线的手册也很全
|
| 返回顶楼 | |
|
发表时间：2008-04-29
这些概念都在Professional JavaScript for Web Developers的第六章有详细阐述
|
| 返回顶楼 | |
|
发表时间：2008-04-30
看在是O+的份上.....
|
| 返回顶楼 | |
浏览 20605 次
