DOM 定义了访问和操作 HTML 文档的标准方法。
1、DOM访问节点
document.documentElement:返回HTML根元素
&var ohtml = document.documentE
&alert(ohtml.nodeName);
结果为：HTML
getElementsByTagName()：返回一个列表，这些列表的特点是：后面的节点名称相同
var items = document.getElementsByTagName('a');//获取所有的超链接
getElementsByName()：获取name属性的值相同的元素，在选择单选按钮时很好用
getElementById()
注意:如果给定的元素匹配某个元素的name属性的值，则也会返回这个元素，当然如果有匹配的ID值，首先返回此元素，如果没有这个元素，
则返回name属性的值匹配的元素
firstChild：获取下级节点的第一个子节点
ohtml.firstChild.nodeName结果为：head
lastChild：获取下级节点的最后一个子节点
childNodes[0]：获取某个节点的子节点列表中的第一个子节点,以此类推可以获取多个节点
但是会有空文本节点，所以在获取某一节点（ul）的子节点时，需要清除空文本节点。
清除空文本方法如下：
&function cleanWhitespace(element) {
&&&&&&&&&&& for (var i = 0; i & element.childNodes. i++) {
&&&&&&&&&&&&&&& var node = element.childNodes[i];
&&&&&&&&&&&&&&& if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
&&&&&&&&&&&&&&&&&&& node.parentNode.removeChild(node);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
参数为某一节点。
parentNode：获取节点的父节点
&var ohtml = document.documentE& （HTML）
&&& var ohead = ohtml.childNodes[0];&&
&&& var obody = ohtml.childNodes[1];
&&&&&&&& alert(ohead.parentNode.nodeName); 结果为：HTML
&&&&&&&& alert(obody.parentNode==ohtml);
兄弟节点：如下中的li标签
previousSibling：同级节点的上一个节点
nextSibling：同级节点的下一个节点
& var ohtml = document.documentE
&&&&&&&&&&& var ohead = ohtml.childNodes[0];
&&&&&&&&&&& var obody = ohtml.childNodes[1];
&&&&&&&&&&& alert(obody.previousSibling.nodeName);结果为head
&&&&&&&&&&& alert(ohead.nextSibling.nodeName);结果为body
2、获取节点的属性，修改节点的属性，删除节点的属性。
getAttribute(name)：获取节点中属性为name的属性值
setAttribute(name,newvalue):将节点中属性为name的属性值更改为newvalue
removeAttribute(name):删除节点中名称为name的属性
3、操作节点
createElement():创建节点
createTextNode():创建文本节点
appendChild()：将子节点附加到父节点中
removeChild()：最好使用节点的parentNode属性来删除节点
在客户端通过js脚本动态创建的节点，是不能通过js程序访问的，比如替换，删除，能够操作(替换，删除)的节点必须不是动态创建的，也
就是查看源文件时能够看到的html节点
replaceChild()：注意，第1个参数为新节点，第2个参数为旧节点
insertBefore():将新消息在旧消息之前显示
function replacenode() {
&&&&&&&&&&& var op = document.createElement(&p&);
&&&&&&&&&&& var otext = document.createTextNode('世界你好');
&&&&&&&&&&& op.appendChild(otext);
&&&&&&&&&&& var oldop = document.getElementsByTagName('p')[0];
&&&&&&&&&&& oldop.parentNode.insertBefore(op, oldop);
4、js创建表格
rows:&tbody/&中所有行的集合
deleteRow(position):删除指定位置的行
insertRow(position):在rows集合中的指定位置插入新行
&tr/&元素添加以下内容
cells:&/tr&元素中所有单元格的集合
deleteCell(position):删除指定位置的单元格
insertCell(position):在指定位置插入新的单元格
function createTable() {
&&&&&&&&&&& var tablenode = document.createElement('table');
&&&&&&&&&&& //设置表括格属性
&&&&&&&&&&& tablenode.setAttribute('border', '1px');
&&&&&&&&&&& tablenode.setAttribute('width', '500px');
&&&&&&&&&&& tablenode.setAttribute('height', '100px');
&&&&&&&&&&& //创建第一行
&&&&&&&&&&& tablenode.insertRow(0);
&&&&&&&&&&& tablenode.rows[0].insertCell(0);
&&&&&&&&&&& tablenode.rows[0].insertCell(1);
&&&&&&&&&&& tablenode.rows[0].insertCell(2);
&&&&&&&&&&& tablenode.rows[0].cells[0].appendChild(document.createTextNode('姓名'));
&&&&&&&&&&& tablenode.rows[0].cells[1].appendChild(document.createTextNode('旅游地点'));
&&&&&&&&&&& tablenode.rows[0].cells[2].appendChild(document.createTextNode('出发日期'));
&&&&&&&&&&& //创建第二行
&&&&&&&&&&& tablenode.insertRow(1);
&&&&&&&&&&& tablenode.rows[1].insertCell(0);
&&&&&&&&&&& tablenode.rows[1].insertCell(1);
&&&&&&&&&&& tablenode.rows[1].insertCell(2);
&&&&&&&&&&& tablenode.rows[1].cells[0].appendChild(document.createTextNode('刘能'));
&&&&&&&&&&& tablenode.rows[1].cells[1].appendChild(document.createTextNode('象牙山'));
&&&&&&&&&&& tablenode.rows[1].cells[2].appendChild(document.createTextNode(''));
&&&&&&&&&&& var divnode = document.getElementById('mydiv');
&&&&&&&&&&& divnode.appendChild(tablenode);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：30246次
排名：千里之外
原创：57篇
转载：15篇
(3)(3)(1)(8)(12)(7)(15)(8)(6)(9)在IE中，如何使用JS删除DOM对象的属性？ - ITeye问答
&input type="text" disabled="disabled" /&
在IE中，如何使用js将文本框的disabled属性去掉？使该文本框变成可编辑的。
问题补充：eplang 写道document.getElementById("inputName").removeAttribute("disabled");
或者
document.getElementById("inputName").disabled = "";
或者
document.getElementById("inputName").disabled =
非常感谢你的回答。
经测试，在IE6中，removeAttribute("disabled")和disabled = ""这两种方式测试通过。
disabled = false不起作用。
采纳的答案
document.getElementById("inputName").removeAttribute("disabled");
或者
document.getElementById("inputName").disabled = "";
或者
document.getElementById("inputName").disabled =
document.getElementById("inputName").removeAttribute("disabled");
已解决问题
未解决问题js操作DOM--添加、删除节点的简单实例
投稿：jingxian
字体：[ ] 类型：转载 时间：
下面小编就为大家带来一篇js操作DOM--添加、删除节点的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js removeChild() 用法
&p id="p1"&welcome to &b&javascript&/b& world !&/p&
&script language="javascript" type="text/javascript"&
function nodestatus(node)
var temp="";
if(node.nodeName!=null)
temp+="nodeName="+node.nodeName+"\n";
else temp+="nodeName=null \n";
if(node.nodeType!=null)
temp+="nodeType="+node.nodeType+"\n";
else temp+="nodeType=null \n";
if(node.nodeValue!=null)
temp+="nodeValue="+node.nodeValue+"\n";
else temp+="nodeValue=null \n";
var parent=document.getElementById("p1");
var msg="父节点 \n"+nodestatus(parent)+"\n";
//返回元素节点p的最后一个孩子
last=parent.lastC
msg+="删除之前：lastChild--"+nodestatus(last)+"\n";
//删除节点p的最后一个孩子,变为b
parent.removeChild(last);
last=parent.lastC
msg+="删除之后：lastChild--"+nodestatus(last)+"\n";
alert(msg);
&title&js控制添加、删除节点&/title&
&script type="text/javascript"&
function addParagraph() {
all = document.getElementById("paragraphs").childN
var newElement = document.createElement("p");
var seq = all.length + 1;
//创建新属性
var newAttr = document.createAttribute("id");
newAttr.nodeValue = "p" +
newElement.setAttribute(newAttr);
//创建文本内容
var txtNode = document.createTextNode("段落" + seq);
//添加节点
newElement.appendChild(txtNode);
document.getElementById("paragraphs").appendChild(newElement);
function delParagraph() {
all = document.getElementById("paragraphs").childN
document.getElementById("paragraphs").removeChild(all[all.length -1]);
background-color : #e6e6e6 ;
&input type="button" value="添加节点" onclick="addParagraph();"/&
&input type="button" value="删除节点" onclick="delParagraph();"/&
&div id="paragraphs"&
&p id="p1"&段落1&/p&
&p id="p2"&段落2&/p&
以上这篇js操作DOM--添加、删除节点的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}