4-DOM对象

最新推荐文章于 2022-10-21 22:49:14 发布

南隅笙箫

最新推荐文章于 2022-10-21 22:49:14 发布

阅读量119

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40672635/article/details/105379732

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM对象

一、DOM简述

DOM (Document Object Model）文档对象模型文档：标记型文档（HTML 等）

DOM 是将标记型文档中所有内容（标签、文本、属性）都封装成对象，

通过操作对象的属性或者方法，来达到操作或者改变 HTML 展示效果的目的。

DOM树

<html>
    <head>
        <title>文档标题</title>
    </head>
    <body>
        <a href="">我的链接</a>
        <h1>
            我的标题
        </h1>
    </body>
</html>

每个标签会被加载成 DOM 树上的一个元素节点对象。

每个标签的属性会被加载成 DOM 树上的一个属性节点对象

每个标签的内容体会被加载成 DOM 树上的一个文本节点对象

整个 DOM 树，是一个文档节点对象，即 DOM 对象。

1个 HTML 文档加载到内存中就会形成一个 DOM 对象

DOM树的特点：

必定会有一个根节点

每个节点都是节点对象

常见的节点关系：父子节点关系

文本节点对象没有子节点-叶子节点

每个节点都有一个父节点，零到多个子节点

只有根节点没有父节点

二、获取元素对象的四种方式

1、`getElementById();`

通过元素ID获取对应元素对象

如果找不到则返回null

var t1 = document.getElementById("t1");

2、`geElementsByName();`

通过元素的name属性获取符合要求的所有元素

返回一个数组，找不到返回空数组

var arr = document.getElementsByName("hobby");

3、`getElementsByTagName();`

通过元素的元素名属性获取符合要求的所有元素

返回一个数组，找不到返回空数组

var arr = document.getElementsByTagName("li");

4、`getElementsByClassName();`

通过元素的class属性获取符合要求的所有元素

返回一个数组，找不到返回空数组

三、元素对象常见属性

1、value

修改元素的值

元素对象.value //获取元素对象的value属性值
元素对象.value = 属性值 //设置元素对象的属性值
var t1 = document.getElementById("t1");
t1.value = "你好"

2、className

修改元素的样式

与value用法差不多

3、checked

标识复选框

HTML中checked=“checked”,js中返回true，false

t1.checked = true

4、innerHTML

操作元素的内容体

t1.innerHTML = "算法算法"	//设置标签内容体
t1.innerHTML +="sfaf"	//追加内容体信息

南隅笙箫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4-DOM对象

DOM对象一、DOM简述DOM (Document Object Model）文档对象模型文档：标记型文档（HTML 等）DOM 是将标记型文档中所有内容（标签、文本、属性）都封装成对象，通过操作对象的属性或者方法，来达到操作或者改变 HTML 展示效果的目的。DOM树<html> <head> <title>文档标题&...
复制链接

扫一扫