一 .节点的属性
nodeName节点名称
nodeValue 节点值
nodeType 节点类型
innerHTML元素的文本内容
元素上的属性：
id
value
className
1.节点名称
document.nodeName 文档的节点名，是 固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text
2.节点值
document.nodeValue 文档的节点值，是 null
div1.nodeValue 元素的节点值，是null
div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值，是内容 即： #text
3.节点类型
nodeType表示一个节点的类型
不同的节点类型，对应的节点类型值是不一样的
document.nodeType 文档的节点类型，是 9`
div1.nodeType 元素的节点类型，是 1
div1.attributes[0].nodeType 属性的节点类型，是 2
div1.childNodes[0].nodeType 内容的节点类型，是 3
4.元素的文本内容
修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。 效果是一样的。
<html>
<div id="d1">hello HTML DOM</div>
<script>
function changeDiv1(){
document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>
</html>
5.元素上的属性
元素上的属性，比如id,value 可以通过 . 直接访问
如果是自定义属性，那么可以通过如下两种方式来获取
getAttribute(“test”)
attributes[“test”].nodeValue
注: class需要通过className获取
（举例自定义的属性）
<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
二. 样式
一个元素节点的style属性即对应的css
1.隐藏和显示
通过给元素的style.display 赋值，改变显示还是隐藏
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
1671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
