html DOM 01 节点概念

DOM 是Document Object Model( 文档对象模型 )的缩写。

DOM是把html里面的各种数据当作对象进行操作的一种思路。

比如一个超链,作为一个DOM对象,就可以使其隐藏,修改其href指向的地址。

 

示例 1 : 

节点概念

DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
如本例
通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点

html DOM 01 节点概念

 

 

 

 

<html>
<body>
<div id="d1">hello HTML DOM</div>
  
</body>
  
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
  
</html>

html DOM 01 节点概念

 

html DOM 01 节点概念

上一篇:12 个 JS 技巧


下一篇:webpack中文网的错误&&未更新内容(webpack4)