Dom节点笔记

1. 节点基础

1.节点类型

• 元素节点 Node.ELEMENT_NODE(1)
• 属性节点 Node.ATTRIBUTE_NODE(2)
• 文本节点 Node.TEXT_NODE(3)

2.节点属性

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

• nodeName

• nodeValue

nodeNamenodeValuenodeType元素节点元素名null1属性节点属性名称属性值2文本节点#text节点的内容3Document#documentnull9

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>