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

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

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

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

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

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

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

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

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

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

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

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

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

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"

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

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

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

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

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

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

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

展开阅读全文

上一篇：MySQL中查询今天和昨天的方法详解下一篇：MySQL如何向上取整到百位