js基础之DOM中元素对象的属性方法详解

JS基础之DOM中元素对象的属性方法详解

什么是DOM？

DOM，即文档对象模型（Document Object Model）。在网页中，每个标签都可以看做是一个对象，这些对象被组织在一起形成了DOM树形结构。通过JS可以对DOM树进行访问和操作，从而实现网页的动态效果和交互。

元素对象

在DOM中，标签被称为元素，每个元素都是一个对象，我们可以通过JS来操作元素对象。下面介绍一下元素对象常用的属性和方法。

元素对象的属性

1. innerHTML

innerHTML是元素对象的一个属性，用于获取或设置元素的标签内的所有HTML内容。例如：

<div id="demo">这是一个div标签</div>

var element = document.getElementById("demo");
console.log(element.innerHTML); // "这是一个div标签"

2. className

className是元素对象的一个属性，用于获取或设置元素的class属性值。例如：

<div id="demo" class="box">这是一个div标签</div>

var element = document.getElementById("demo");
console.log(element.className); // "box"

3. style

style是元素对象的一个属性，用于获取或设置元素的内联样式。例如：

<div id="demo" style="color: red;">这是一个div标签</div>

var element = document.getElementById("demo");
console.log(element.style.color); // "red"

4. src

src是图片元素对象的一个属性，用于获取或设置图片元素的src属性值。例如：

<img id="demo" src="img/demo.jpg">

var element = document.getElementById("demo");
console.log(element.src); // "http://www.example.com/img/demo.jpg"

元素对象的方法

1. getElementById()

getElementById()是document对象的一个方法，用于获取指定id的元素对象。例如：

<div id="demo">这是一个div标签</div>

var element = document.getElementById("demo");
console.log(element.innerHTML); // "这是一个div标签"

2. getElementsByTagName()

getElementsByTagName()是元素对象的一个方法，用于获取指定标签名的元素对象。例如：

<div>
  <p>这是一个p标签</p>
  <ul>
    <li>这是一个li标签</li>
  </ul>
</div>

var elements = document.getElementsByTagName("li");
console.log(elements[0].innerHTML); // "这是一个li标签"

以上就是元素对象的常用属性和方法，希望对大家有所帮助。