DOM学习2-节点的属性和样式

最新推荐文章于 2021-06-09 16:34:23 发布

PERCENTILE__

最新推荐文章于 2021-06-09 16:34:23 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/PERCENTILE__/article/details/86603905

版权

一 .节点的属性
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>

PERCENTILE__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM学习2-节点的属性和样式

一 .节点的属性nodeName节点名称nodeValue 节点值nodeType 节点类型innerHTML元素的文本内容元素上的属性：idvalueclassName1.节点名称document.nodeName 文档的节点名，是固定的#documentdiv1.nodeName 元素的节点名，是对应的标签名 divdiv1.attributes[0].nodeNam...
复制链接

扫一扫