ch03 -- DOM 操作

最新推荐文章于 2019-05-05 21:23:15 发布

peabits

最新推荐文章于 2019-05-05 21:23:15 发布

阅读量96

点赞数

分类专栏： Web 前端

本文链接：https://blog.csdn.net/Pranuts_/article/details/89437057

版权

26 篇文章 1 订阅

订阅专栏

认识 DOM

文档对象模型 DOM（Document Object Model）定义访问和处理 HTML 文档的标准方法。

DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML 文档可以说由节点构成的集合，三种常见的 DOM 节点:

示例：

<a href="http://www.baidu.com">JavaScript DOM</a>

元素节点：<a>
文本节点：JavaScript DOM
属性节点：href=“http://www.baidu.com”

网页由标签将信息组织起来，而标签的 id 属性值是唯一的。在网页中通过 id 先找到标签，然后对其进行操作。

语法:

var object = document.getElementById("id");

注：object 是通过 document.getElementById(“id”) 获取的元素对象。。如果对元素进行操作，要通过它的属性或方法。

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

var content = object.innerHTML; // 获取内容

object.innerHTML = "newcontent"; // 替换内容

注意:

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法:

Object.style.property = "newstyle";

基本属性表（property）:

注意：该表只是一小部分 CSS 样式属性，其它样式也可以通过该方法设置和修改。

网页中显示和隐藏的效果，可通过 display 属性来设置。

语法：

object.style.display = "value";

value 取值:

值	描述
none	此元素不会被显示（即隐藏
block	此元素将显示为块级元素（即显示）

className 属性设置或返回元素的 class 属性。

语法：

object.className = "classname";

作用：

关注