JavaScript基础203——Dom对象介绍

最新推荐文章于 2024-12-28 17:03:31 发布

原创最新推荐文章于 2024-12-28 17:03:31 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

JAVA 专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了文档对象模型（DOM）的基本概念及其操作方法，包括如何通过不同的方式获取元素对象，如getElementById, getElementsByTagName等；如何创建DOM对象；以及元素对象的方法如removeAttribute, setAttribute等。此外还讲解了如何通过style属性控制元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Document：文档对象

1、创建(获取)

 window.document 
 document

2、方法

//获取Element对象
	getElementById()       //id获取元素对象。id属性值一般唯一
	getElementsByTagName() //名称获取元素对象们。返回值是一个数组
	getElementsByClassName() //Class属性值获取元素对象们。返回值是一个数组
	getElementsByName()    //name属性值获取元素对象们。返回值是一个数组
	
//创建其他DOM对象：
	createAttribute(name)
	createComment()
	createElement()
	createTextNode()

2、Element：元素对象

1、获取/创建

window.element
element

2、方法

removeAttribute()  //删除属性
setAttribute()     //设置属性

3、Node：节点对象，其他几个的父对象

1、方法

//CRUD  dom树
	appendChild()     //添加新的子节点
	removeChild()	  //删除子节点
	replaceChild()    //新节点替换一个子节点

2、属性


parentNode      //返回节点的父节点

4、HTML DOM

1、标签体的设置和获取 innerHTML

2、使用html元素对象的属性

3、控制元素样式

 //style属性来设置
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        div1.style.fontSize = "20px";
	
//类选择器定义样式
div1{
	border:1px solid red;
	width:200px;
	font-size:20px;
}