JS DOM详解

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)" onm ouseout="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>

标签间的层级关系

• previousElementSibling ： 获取指定元素的 上一个 紧邻的兄弟元素
• nextElementSibling : 获取指定元素的 下一个 紧邻的兄弟元素
• parentNode / parentElement : 获取指定元素的 父级 元素。
• children : 获取指定元素的 所有 子元素。

标签文档操作

• document.createElement(tagName) : 使用程序 动态创建 一个标签 。此时标签 会存储在 内存中。
• appendChild(node) : 将指定的节点 node 添加到 目标对象的 所有孩子的 最后。
• append(…node|string) : 将指定的 节点 node 或者 文本内容 添加到 目标对象的 所有孩子的 最后。支持添加多个
• prepend(…node|string) : 将指定的 节点 node 或者 文本内容 添加到 目标对象的 所有孩子的 前面。支持添加多个
• insertBefore(node, child) : 将 指定的 节点 node 插入到 目标对象 指定 的 子元素 的 前面 。
• before(…node|string) : 将 指定的 节点 node 插入到 目标对象的前面， 形成兄弟关系
• after(…node|string) : 将 指定的 节点 node 插入到 目标对象的后面， 形成兄弟关系
• replaceChild(node, child) : 将 child 子元素 替换成 node 节点
• replaceWith(node) : 将目标对象 替换成 node 节点 。
• remove() : 删除目标对象。
• removeChild(child) : 删除 目标对象中的 指定 子节点 。

标签位置信息

• offsetWdith / offsetHeight : 获取 盒子 的大小 （边框 + 内边距 + 内容大小） 、只读属性

• offsetLeft / offsetTop : 获取 离他 最近的 具有 定位的 父级 元素的 距离， 如果他所有的父元素均没有定位， 则 相对于 浏览器的偏移。、只读属性

  
  

• clientWidth / clientHeight : 获取 盒子 中 可见 内容的宽 和 高 、只读属性

• clientLeft / clientTop : 获取 左 / 上 边框 的宽度 。 、只读属性

• scrollWidth / scrollHeight : 获取 盒子中 内容的 滚动宽 和 滚动高 ，如果 盒子 内容没有溢出 ，那么 值 和 可见宽/高 相同。 、只读属性
• scrollLeft / scrollTop : 获取 / 设置 滚动条的 位置 。

• offsetParent : 获取 离他 最近的 具有 定位的 父级 元素、 如果他所有的父元素均没有定位，则返回 body 。
• getBoundingClientRect() : 获取元素 距离 浏览器的 位置、返回一个 包含 top 和 left 属性的对象 。