【Javascript】DOM文档

freedomSTUDENT2023-10-28 18:01

DOM

Html与txt的不同

打印html

[改变元素的 inner HTML](#改变元素的 inner HTML)

改变前

改变后

[改变元素的 inner HTML](#改变元素的 inner HTML)

[改变 HTML 元素的属性值](#改变 HTML 元素的属性值)

DOM

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

Html与txt的不同

打印html

javascript 复制代码

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


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

</script>

打印txt

javascript 复制代码

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


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

</script>

HTML是有组织的结构化⽂件

对dom节点的常规操作

查找节点

通过id查找节点

javascript 复制代码

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


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

</script>

通过类名来查找元素

javascript 复制代码

<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

通过标签查找元素

javascript 复制代码

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


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

</script>

改变元素的内容

改变元素的 inner HTML

javascript 复制代码

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

<script>


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


</script>

改变前

改变后

改变元素的 inner HTML

javascript 复制代码

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

<script>


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



</script>

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

改变 HTML 元素的属性值

例如改变id值

javascript 复制代码

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

<script>


     a.id='b';



</script>

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

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