目录

DOM

Html与txt的不同

打印html

打印txt

​编辑 

对dom节点的常规操作

查找节点

通过id查找节点

通过类名来查找元素

通过标签查找元素

改变元素的内容

改变元素的 inner HTML

改变前

改变后 

 改变元素的 inner HTML

改变 HTML 元素的属性值

 

---

DOM

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

Html与txt的不同

打印html

你好
<script>
 
 
  var h1= document.getElementsByTagName('h1')[0];
  console.log(h1.outerHTML);
 
script>

打印txt

你好
<script>
 
 
  var h1= document.getElementsByTagName('h1')[0];
  console.log(h1.outerText);
 
script>

 

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

对dom节点的常规操作

查找节点

通过id查找节点

"a">你好
<script>
 
 
  var h1= document.getElementById('a');
  console.log(h1);
 
script>

通过类名来查找元素

"a">你好
<p class="b">正在学习p>
<script>
 
 
  /*var h1= document.getElementById('a');
  console.log(h1);*/
 
  var p=document.getElementsByClassName('b');
  console.log(p);
 
script>

 

 

是一个对象的形式

 

 

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

 

通过标签查找元素

你好
<script>
 
 
  var h1= document.getElementsByTagName('h1')[0];
  console.log(h1.outerHTML);
 
script>

 

  

改变元素的内容

改变元素的 inner HTML

"a">你好
 
<script>
 
 
    a.innerHTML='我正在学习javascript';
    
 
 
script>

改变前

改变后 

 改变元素的 inner HTML

"a">你好
 
<script>
 
 
    a.outerHTML='我正在学习javascript';
 
 
 
script>
 

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

改变 HTML 元素的属性值

例如改变id值

"a">你好
 
<script>
 
 
     a.id='b';
 
 
 
script>

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

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