JS DOM详解

最新推荐文章于 2025-02-04 21:16:52 发布

jay丿

最新推荐文章于 2025-02-04 21:16:52 发布

阅读量1.7k

点赞数 24

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/panpanpan233/article/details/145043085

版权

DOM (文档对象模型)

文档对象模型主要的职责是处理网页中的标签(元素)

获取标签（元素）对象

document.getElementById(“id”) 根据标签的 ID 属性值获取指定的元素、该方法只能返回一个标签。
document.getElementsByTagName(“tag”) : 根据标签名获取所对应的多个元素组成的对象（形似数组的对象）。
document.getElementsByClassName(“class”) 根据标签的 class 属性值获取指定的多个元素组成的对象（形似数组的对象）。
document.getElementsByName(“name”) 根据标签的 name 属性值获取自指定的多个元素组成的对象（形似数组的对象）
document.querySelector(“css”) : 根据 CSS 选择器选中满足条件的第一个元素
document.querySelectorAll(“css”) : 根据 CSS 选择器选中满足条件的所有元素

标签对象基本操作

nodeName / tagName : 是一个只读属性、用来获取标签名、返回标签名的全大写表示形式。
getAttribute(name) : 根据属性名获取对应的属性值，属性名可以不是标签的原始属性。
setAttribute(name, value) : 添加/修改指定属性和值。
removeAttribute(name) : 删除指定的属性。
hasAttribute(name) : 判断标签上是否有指定的属性。
innerHTML : 获取 / 修改标签体中的超文本内容
innerText : 获取 / 修改标签体中的纯文本内容

**一个标签的原始属性是可以直接通过点调用、例如 id , style, a标签的href, img的标签的 src , 复选框 checked , 下拉列表的 selected 、表单元素的 disabled **

style 属性的操作

setProperty(name, value) : 设置 style 样式
getPropertyValue(name) : 根据 css 属性名获取 style 样式中对应的属性值。
removeProperty(name) : 移除 css 属性名对应的 style 样式

// 获取 p 标签 
	let ptag = document.querySelector("p") ;
	// 将 p 标签的 文本内容 字体大小 设置为 50px , 背景颜色设为 红色， 字体颜色设置为 白色。
	// ptag.style.fontSize = "50px";
	ptag.style.backgroundColor = "#f00" ; 
	// ptag.style.color = "#fff" ;
	ptag.style.setProperty("font-size", "100px"); 
	//
	let x = ptag.style.getPropertyValue("font-size"); 
	
	ptag.style.removeProperty("font-size")

class 属性的操作

className : 获取 / 覆盖 class 属性值
classList : 获取 class 属性对应的对象，该对象有三个方法
- add(x) : 添加指定的 class 样式
- remove(x) : 删除指定的 class 样式
- contains(x) : 判断 class 属性值是否包含某一个样式。
- toggle(x) : 如果不存在则添加样式、否则移除样式。

dataset 属性的操作

在 HTML 标签中，如果某个属性格式为 data-xxx , 那么这个属性被称为 dataset 属性。

dataset属性可以通过 getAttribute , setAttribute, removeAttribute 等方法进行操作，但不专业

<img data-src="https://img0.baidu.com/it/u=2563259522,1302850836&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=355"
		src="https://img2.baidu.com/it/u=2500676160,2111567428&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800" alt=""
			onmouseover="changeImg(this)" onmouseout="changeImg(this)">
		
<script>
	// 1. 获取 p 标签   mouseover (鼠标在 ... 上) ， mouseout (鼠标在 ... 外)
	function changeImg(tag) {
		// 获取 data-src 的值 
		let newSrc = tag.dataset.src ;
		let oldSrc = tag.src ;
		// 将 图片的 src 设置 newsrc , 将 data-src 设置为 oldsrc
		tag.src = newSrc ;
		tag.dataset.src = oldSrc ;
	}
	
</script>