【Javascript】DOM文档

目录

DOM

Html与txt的不同

打印html

打印txt

​编辑 

对dom节点的常规操作

查找节点

通过id查找节点

通过类名来查找元素

通过标签查找元素

改变元素的内容

改变元素的 inner HTML

改变前

改变后 

 改变元素的 inner HTML

改变 HTML 元素的属性值

 

---

DOM

• DOM就是⽂档对象模型，是⼀个抽象的概念
• 定义了访问和操作HTML⽂档的⽅法

Html与txt的不同

打印html

<h1>你好</h1>
<script>


  var h1= document.getElementsByTagName('h1')[0];
  console.log(h1.outerHTML);

</script>

打印txt

<h1>你好</h1>
<script>


  var h1= document.getElementsByTagName('h1')[0];
  console.log(h1.outerText);

</script>

 

• HTML是有组织的结构化⽂件

对dom节点的常规操作

查找节点

通过id查找节点

<h1 id="a">你好</h1>
<script>


  var h1= document.getElementById('a');
  console.log(h1);

</script>

通过类名来查找元素

<h1 id="a">你好</h1>
<p class="b">正在学习</p>
<script>


  /*var h1= document.getElementById('a');
  console.log(h1);*/

  var p=document.getElementsByClassName('b');
  console.log(p);

</script>

 

 

是一个对象的形式

 

 

只写了一个p标签，他的数组下标为0 

 

通过标签查找元素

<h1>你好</h1>
<script>


  var h1= document.getElementsByTagName('h1')[0];
  console.log(h1.outerHTML);

</script>

 

  

改变元素的内容

改变元素的 inner HTML

<h1 id="a">你好</h1>

<script>


    a.innerHTML='我正在学习javascript';
    


</script>

改变前

改变后 

 改变元素的 inner HTML

<h1 id="a">你好</h1>

<script>


    a.outerHTML='我正在学习javascript';



</script>

 从图可以知道outerHTML改变的是标签

改变 HTML 元素的属性值

例如改变id值

<h1 id="a">你好</h1>

<script>


     a.id='b';



</script>

ctrl+shift+j打开控制台查看Elements 

这里只是举了一个例子，还可以写改变其他属性