D 04_DOM对象的获取元素和操作元素对象

最新推荐文章于 2025-07-14 15:38:27 发布

原创最新推荐文章于 2025-07-14 15:38:27 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#对象 #dom #JavaScript引入方式和注解 #文档 #标签

本文介绍了DOM文档对象模型的基础概念，包括如何通过不同方法获取元素节点对象及其特点，并详细讲解了如何利用JavaScript进行DOM元素的属性、样式及内容的操作。

常见面试题
13、DOM对象-DOM简述
DOM文档对象模型,整个 html加载到内存中会形成一颗DOM树,产生一个DOM对象叫document.每一个标签,文本,属性都会被封装成DOM树的节点对象.

有几种方式获取元素节点对象，方法有什么特点？

整个html文档加载到内存中形成一个document树,产生的每一个DOM 对象叫
document.每一个标签 ,文本,属性都可以封装成DOM对象

常用的四种方式:
getElementById(); ---通过元素ID获取对应元素对象
可以通过ID获取对应的元素对象，如果找不到，返回null
getElementsByName(); ---通过元素的name属性获取符合要求的所有元素
可以通过name来获取元素
getElementsByTagName(); ---通过元素的元素名属性获取符合要求所有元素
getElementsByClassName(); ---通过元素的class属性获取符合要求的所有元素可以获取到元素节点对象数组；如果找不到，返回空数组

DOM中操作元素对象

value
元素对象.value，获取元素对象的value属性值。
元素对象.value=属性值设置元素对象的value属性值。

修改元素的值
4.3.2、className
元素对象.className，获取元素对象的class属性值。
元素对象. className =属性值设置元素对象的class属性值。

修改元素样式
4.3.3、checked
元素对象.checked，获取元素对象的checked属性值。
元素对象. checked =属性值设置元素对象的checked属性值。

注：HTML中checked=”checked”，JavaScript中返回true，false

修改单选/复选的选中与否
4.3.3、innerHTML
元素对象.innerHTML，获取元素对象的内容体
元素对象.innerHTML=值设置元素对象的内容体

操作元素的内容体