DOM学习

2023-09-25 20:35:16

DOM

文档对象模型(Document Object MOdel处理可扩展标记语言（HTML或XML）的标准编程接口，通过DOM接口可以改变网页的内容、结构和样式。

DOM树

1文档:一个页面就是一个文档，DOM中使用document表示
2元素:页面中的所有的标签都是元素，DOM中使用element表示
3节点:网页中的所有内容都是节点（标签、属性、文本、注释），DOM中使用node表示
（DOM把以上内容都看作是对象）

获取元素

	1根据ID获取
		getElementById('id') 
		其中的id大小写敏感并且必须是字符串,返回的是元素对象
		document.getElementById('id')

注意: 因为我们文档页从上往下加载，所以先得有标签我们script写到标签下面
console.dir打印我们返回的元素对象更好的查看里面的属性和方法
2根据标签名获取
2.1）getElementsByTagName()返回带有指定标签名的对象的集合以伪数组的形式存储,如果想打印里面的元素，可以采取for循环遍历
document.getElementsByTagName()
如果页面中只有一个li也还会返回伪数组形式
如果没有元素返回的是一个空的伪数组
2.2）还可以获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName(‘标签名’)
其中父元素必须是单个对象(必须指明是那一个元素对象)，获取的时候不包括父元素自己
3h5新增
3.1)根据类名返回元素对象集合 getElementsByClassName(‘类名’)
document.getElementsByClassName(‘类名’)
3.2)根据指定选择器返回第一个元素对象querySelector(‘选择器’)
document.querySelector(‘选择器’)
例如 document.querySelector(’.box’)、document.querySelector(’#nav’)
document.querySelector(‘li’)
切记：里面的选择器加符号
3.3)根据指定选择器返回所有的元素对象 querySelectorAll(‘选择器’)
document.querySelectorAll(‘选择器’)
4特殊元素获取
获取body标签 document.body 返回body元素对象
获取html标签 document.documentElement; 返回html元素对象

事件基础

	事件是可以被js侦测到的行为 简单理解:触发--响应机制
	事件有三部分组成 事件源 事件类型 事件处理程序
		１事件源 事件被触发对象 谁 按钮
		２事件类型 如何触发 什么事件 如鼠标点击 鼠标经过 键盘按下
		３事件处理程序 通过一个函数赋值的方式完成
	执行事件的步骤
		获取事件源 －注册事件(绑定事件) －添加事件处理程序(采用函数赋值)

操作元素

可以利用DOM操作元素来改变元素里面的内容和属性
1改变元素内容
element.innerText 从起始位置到终止位置的内容，但是它不识别html标签，同时空格和换行也会去掉。
element.innerHTML 从起始位置包括止位置的内容，识别html标签，同时保留空格和换行
这两个属性是可读写的可以获取元素里面的内容例如console.log(element.innerText)、console.log(element.innerHTML)

常用元素的属性操作 src、href
表单元素的属性操作
type、value(修改框中文本)、checked、selected、disabled(使表单禁用)
		（this 指向的是事件函数的调用者）

样式属性操作

修改元素大小、颜色、位置等样式
		    element.style 行内样式操作 适合样式修改少 功能简单的
			1 style里面的属性采取驼峰命名法例如element.style.backgroundColor
			2 js修改的style样式，产生的是行内样式，css的权重比较高
			
		      事件 onfocus 获得焦点 onblur 失去焦点
		   element.className 类名样式操作 适合样式多 功能多
			例如 this.className='change' 将当前元素的类名改为了change
			className 会直接更改元素的类名，会覆盖原先的类名，如果想要保留原先的类名，我们可以把原来的类名也写上(多类名选择器)
			例如 this.className='first change';
	排他思想
		如果有同一组元素，我们想要某一个元素实现某种方式，需要用到循环的排他思想
		所有样式全部清除
		给当前元素设置样式
		顺序不能颠倒
	onmouseover 鼠标经过 onm ouseout 鼠标离开

自定义属性的操作

		1获取属性值 
			1.1）element.属性 获取内置属性（元素本身自带的）
			1.2）element.getAttribute('属性') 可以获取用户自定义属性
		2设置属性值
			2.1）element.属性='值' 设置内置属性值
			2.1）element.setAttribute('属性','值') 针对自定义
		3移除属性
			element.removeAttribute('属性')
	tab栏切换案例

H5自定义属性

		目的 为了保存并使用数据。有写数据可以保存到页面中而不用保存到数据库
		但是有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性
		H5自定义属性data-开头作为属性并且赋值 例如 <div data-index="1"></div>	
		H5新增获取自定义属性的方法(ie11以上才支持)
			dataset是一个集合里面存放了所有以data开头的自定义属性
			element.dataset.index(这里不用加data-)或element.dataset.['index']
			如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法 如自定义属性名data-list-name 获取 element.dataset.listName

码农公寓

DOM