DOM简介，DOM树简介，获取元素节点对象； DOM对象的常见的元素属性

一时失言乱红尘 2022-06-06 03:13 202阅读 0赞

**13  DOM简介：DOM(Document Object Model)文档对象模型  文档指的是：标记型文档**（HTML等）

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

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

14 ** DOM树简介**

HTML文档会被浏览器由上到下一次加载并解析。加载到浏览器的内存，加载到DOM数上

其中：每个标签会被加载成DOM树上的一个**元素节点对象；**

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

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

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

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

DOM数的特点：

必定会有一个根节点，

每个节点都是节点对象

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

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

每个节点都只有一个父节点，同时也可能会有零个或多个子节点

只有根节点没有父节点，

**15 获取元素节点对象**

在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象。

**document.**

**getElementById（）；**\---通过**元素（标签）ID**获取对应的元素对象，如果找不到返回null

**getElementsByName（）；**通过**元素（标签）的name属性**获取符合要求的所有元素，返回的是元素节点对象数组，如果找不到，不存在返回空数组

**getElementsByTagName（）；** 通过**元素（标签）的元素（标签）名**属性获取符合要求的所有元素，返回的也是数组，找不到，返回空数组

**getElementsByClassName（）；**通过**元素（标签）的class属性**获取符合要求的所有元素，返回的是元素节点的数组，如果不存在，返回空数组，

16  获取元素节点的注意事项：

获取某个或者某些元素节点对象，必须保证元素节点对象被先加载到内存中；

17  DOM对象的常见的元素属性：

**Value：**元素对象.value，获取该对象的value值

元素对象.value =  “新值“ 给value赋予新的值

可以用来修改value的值

Var t1 = **document.getElementById(“ID”)** ；通过id获取对象 通过对象.value获取值

**className：**和value用法一样 。

可以用来修改元素的样式：

**Checked ：**在javascript中属性值只有true和false

元素对象.checked  获取元素对象的checked属性值

**元素对象.checked =新的属性值true或者false；** 设置新的属性值

可以修改单选后者复选的 默认选中

**InnerHTML**:

**元素对象.innerHTML获取元素对象的内容体**

元素对象.innerHTML =值 设置 （修改）元素对象的内容

元素  对象 innerHTML += 值 在末尾追加元素 对象的内容

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 09_超详细的DOM相关的API操作-导航获取节点-获取元素的方法-节点与元素的常见属性-元素操作-DOM练习小案例

文章目录 1.认识BOM和DOM 2.深入理解BOM 2.1 BOM的基本概念 2.2 DOM Tre

女爷i/ 2023年09月28日 08:48/ 0 赞/ 71 阅读

相关 JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】

> 学习地址： > > 1. [谷粒学院——尚硅谷][Link 1] > 2. [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,J

秒速五厘米/ 2023年01月09日 14:22/ 0 赞/ 130 阅读

相关 DOM对象，控制HTML元素

以下内容，摘自慕课网将HTML代码分解为DOM节点层次图: ![Center][] 节点属性在文档对象模型（DOM）中，每个节点都是一个对象。DOM节点有

灰太狼/ 2022年07月16日 10:22/ 0 赞/ 144 阅读

相关 DOM对象，控制HTML元素 (2)

1 节点属性在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性： 1. nodeName : 节点的名称 2. nodeValue

àì夳堔傛蜴生んèń/ 2022年06月11日 03:23/ 0 赞/ 171 阅读

相关 DOM对象，控制HTML元素

1 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树

野性酷女/ 2022年06月11日 02:50/ 0 赞/ 137 阅读

相关 DOM简介，DOM树简介，获取元素节点对象； DOM对象的常见的元素属性

13 DOM简介：DOM(Document Object Model)文档对象模型文档指的是：标记型文档（HTML等） DOM 是将标记型的文档中内容（标签，文本，属

一时失言乱红尘/ 2022年06月06日 03:13/ 0 赞/ 203 阅读

相关获取Dom元素方式

1.document.getElementById(); 2.document.getElementsByName(); 3.document.getE

谁借莪１个温暖的怀抱￠/ 2022年06月05日 06:18/ 0 赞/ 251 阅读

相关 JavaScript-获取dom对象的css伪元素的属性

window.getComputedStyle(ele,null) 这个函数可以获取dom对象的css的显示的属性。函数的第二个参数基本上直接填了null，而这个参数实际上就

Myth丶恋晨/ 2022年05月25日 23:56/ 0 赞/ 222 阅读

相关 DOM获取页面的元素

1. getElement系列访问通过DOM获取页面的元素的三种方式 Ø getElementById( )方法访问DOM元素 —》 id获取一个元素

比眉伴天荒/ 2022年05月24日 11:05/ 0 赞/ 237 阅读

相关 DOM快速入门——DOM获取元素对象的6种方式

目录：一、为什么要获取页面元素？二、获取元素的5种方式： 1.根据id获取元素 2.根据标签名获取元素

港控/mmm°/ 2021年11月10日 09:52/ 0 赞/ 471 阅读