Dom节点笔记

最新推荐文章于 2024-09-04 15:21:52 发布

原创最新推荐文章于 2024-09-04 15:21:52 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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