js 简单练习节点

来源：互联网发布：狼友基地最新最全数据编辑：程序博客网时间：2024/05/18 13:10

返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement
节点的相对引用：(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合（包含文本节点及标签节点）
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling

元素节点

　　虽然会大量使用元素节点，但很多需要对元素执行的操作都是所有节点共有的方法和属性，而不是元素特有的方法和属性。元素只有两组专有的方法:

　　1. 与属性处理有关的方法:

　　o getAttribute(name) 返回名为 name 的属性值。
　　o removeAttribute(name) 删除名为 name 的属性。
　　o setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
　　o getAttributeNode(name) 返回名为 name 的属性节点(属性节点在下一节介绍)。
　　o removeAttributeNode(node) 删除与指定节点匹配的属性节点。

　　2. 与查找嵌套元素有关的方法:

　　o getElementsByTagName(elementName) 返回具有指定名称的元素节点列表。

属性节点

　　DOM 将属性表示成节点，可以通过元素的 attributes 来访问元素的属性。

文本节点

　　需要考虑的最后一种节点是文本节点(至少在处理 HTML DOM 树的时候如此)。基本上通常用于处理文本节点的所有属性都属于节点对象。实际上，一般使用 nodeValue 属性来访问文本节点的文本。

DOM‘制作-99乘法表

<head><style> div{ background-color:#F99; width:500px; height:300px;}  table{ border:#00F 1px dashed; }</style><script language="javascript" type="text/javascript">//绘制表格function drawTable(){ //创建一个表格var table=document.createElement("table");//给表格加上边框    table.setAttribute("border","1");//外层循环控制行数for(var i=1;i<=9;i++){//循环的创建trvar tr=document.createElement("tr"); //里层循环控制列数 for(var j=1;j<=i;j++){  //先创建text var text=document.createTextNode(j+"*"+i+"="+i*j); //创建列 td var td=document.createElement("td"); //文本追加到td td.appendChild(text);  //把td添加到tr中 tr.appendChild(td);  }  table.appendChild(tr);}//把table追加到div中去document.getElementById("d1").appendChild(table);}//删除table的行function delTable(){//获得tablevar tr = document.getElementsByTagName("tr");var table=tr[0].parentNode;//alert(tr[0].parentNode.nodeName)//根据table删除trvar element=table.removeChild(tr[tr.length-1]);    //alert(element.nodeName);}function getClass(){document.getElementById("d1").className="bbb";alert(document.getElementById("d1").className);}</script></head><body><div id="d1" class="aaa"></div><input type="button" value="绘制9*9的乘法表" onclick="drawTable()" /><input type="button" value="删一行" onclick="delTable()" /><input type="button" value="getClass" onclick="getClass()" /></body>