DOM节点例子
elementNode.setAttribute(name,value)
1.name: 要设置的属性名。
2.value: 要设置的属性值。
elementNode.getAttribute(name)
1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。
2. name:要想查询的元素节点的属性名字
元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)
文本节点:包含在元素节点中。
属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。
nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释:nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9
elementNode.childNodes
访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,它具有length属性。如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
node.lastChild
获取指定节点的父节点
elementNode.parentNode
注意:父节点只能有一个。
访问祖节点:
elementNode.parentNode.parentNode
nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)
nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。
previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
nodeObject.previousSibling
说明:如果无此节点,则该属性返回 null。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body><div>
<span id="span">各类节点</span>
</div>
<script type="text/javascript">
window.onload = function() {
var element = document.getElementById("span");
var text = element.firstChild;
var property = document.getElementById("span").getAttributeNode("id");
//nodeName
alert("这是元素节点的返回值:" + element.nodeName); //返回的标签名SPAN,注意是大写的
alert("这是文本节点的返回值:" + text.nodeName); //返回的#text
alert("这是属性节点的返回值:" + property.nodeName); //返回的是属性名,这里是id
//nodeValue
alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,返回的是null
alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值 各类节点
alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值 span
//nodeType
alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1
alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3
alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2
}
</script>
</body>
</html>