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. 节点获取和修改属性

1. 获取元素节点

   • 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>