Dom节点笔记

1. 节点基础

1.节点类型

元素节点 Node.ELEMENT_NODE(1)

属性节点 Node.ATTRIBUTE_NODE(2)

文本节点 Node.TEXT_NODE(3)

2.节点属性

nodeType

属性返回以数字值返回指定节点的节点类型。

nodeName

nodeValue

	nodeName	nodeValue	nodeType
元素节点	元素名	null	1
属性节点	属性名称	属性值	2
文本节点	#text	节点的内容	3
Document	#document	null	9

2. 节点获取和修改属性

获取元素节点

document.getElementById(elementId)

document.getElementsByName(elementName)

document.getElementsByTagName(tagName)

document.getElementsByClassName(className)

getElementById(elementId)和document.getElementsByName(elementName)

是document节点的专有方法；其他两个方法不是

var ul=document.getElementsByTagName('ul')[0]; //

var li01=ul.getElementsByTagName('li');

var li01=ul.getElementsByClassName('li-css');

后面三种方法返回的是NodeList,是一种伪数组（同样arguments也是

伪数组）。

2.节点系统属性的访问和修改

id

tagName

className

style

code:

<ul>
<li id="li01" name="li" CLASS="licss" style="background-color: red">列列  表 一</li>
</ul>
<script>
window.onload=function () {
var li=document.getElementById('li01');

//******* 属性访问 ********<br>
console.log(li.className); //licss
console.log(li.id); //li01
console.log(li.tagName); //LI
console.log(li.nodeName); //LI
console.log(li.style[0]); //LI
<br>
//******* 属性修改 ********
li.style.backgroundColor='blue';
//id 和 tagName 属性通常不不可以修改。
}
</script>