DOM那些事

DOM: 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

1.获取元素

（1）根据id获取

document.getElementById('id');返回获取的元素对象。

可以使用 condole.dir() 打印元素对象

（2）根据标签名获取

document.getElementsByTagName('标签名') 返回获取的对象的集合。

（3）通过HTML5新增方法获取

1. document.getElementsByClassName('类名');返回对象集合
2. document.querySelector('选择器');返回指定选择器的第一个元素对象
3. document.querySelectorAll('选择器')返回指定选择器所有元素对象的集合
4. 注意：2，3两种方法里的选择器要加符号，document.querySelector('#nav');

（4）特殊元素获取

1. 获取body元素

   document.body

2. 获取html元素

   document.documentElement

   
   
   

2.事件

（1）事件三要素

事件可以理解为一种触发——响应机制

1. 事件源

2. 事件类型

   如：鼠标点击，鼠标经过，键盘输入，点击按钮等

   常见的鼠标事件：

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dwWDvV6E-1634036040660)(DOM那些事/mouse.jpg)]

3. 事件处理程序

（2）执行事件的步骤

1. 获取事件源

   例：btn = document.querySelector('button');

2. 注册事件（绑定事件）

   例： btn.onclick

3. 添加事件处理程序

   例：btn.onclick = function(){}

   
   
   

3.操作元素

（1）改变元素内容

1. element.innerText

   获取的内容去除html标签，空格和换行。

2. element.innerHTML

   获取的内容保留html标签，空格和换行

   例： li.innerHTML = text.value + "<a href=''>删除</a>";

3. 注意：以上两种方法均是😲可读写的，获取后可以进行赋值操作

（2）改变元素属性

1. src / href
2. id / alt / title
3. 表单属性：type / value / checked / selected / disabled
4. 以上属性均可以直接通过 element.属性 = '值'进行操作。

（3）改变样式属性

1. 行内样式操作： element.style.属性（驼峰命名法） = '值';
2. 类名样式操作： element.className = '类名1 类名2';这种方法适用于更改样式较多时，创建一个新的类，然后为元素添加该类，注意会覆盖元素原来的类😲，所以如果要保留原来的类，要这么写：element.className = '类名1 类名2 原类名';

（4）自定义属性

1. 获取属性值

   element.属性;

   element.getAttribute('属性');

   区别： 方法1只能获取元素自带的属性，方法2既能获取自带的也能获取自定义的，但通常方法2用来获取自定义属性。

2. 设置属性值

   element.属性 = '值'

   element.setAttribute('属性' , '值');

3. 移除属性值

   element.removeAttribute('属性');

4. H5自定义属性

   设置属性：以data-开头的自定义属性，目的是为了保存和使用数据

   1. 直接在标签添加 <div data-index='2'></div>
   2. 通过JS添加 element.setAttribute('data-index' , 2);

   获取属性：

   1. 兼容性获取： element.getAttribute('data-index');

   2. element.dataset.index或 element.dataset['index'];

      注意这里的dataset是该元素所有自定义属性的集合，集合里面是键值对。若自定义属性出现多个横杆，如 data-list-index则采取驼峰命名法获取：element.dataset.listIndex

      
      
      

4.节点操作

（1）节点类型

元素节点： nodeType 为1

属性节点： nodeType 为2

文本节点： nodeType 为3（包含文字、空格、换行）

（2）获取节点

1. 父节点

   node.parentNode

   返回最近的一个父节点，若没有则返回null

2. 子节点

   parentNode.childNodes（标准）

   返回子节点集合，包括文本节点。

   parentNode.children（非标准，但各浏览器均支持）

   返回所有子元素节点集合，可以通过所有获取单个子元素

   parentNode.firstChild

   返回第一个子节点，包括文本节点😲

   parentNode.lastChild

   返回最后一个子节点，包括文本节点😲

   parentNode.firstElementChild

   顾名思义，返回第一个子元素节点。

   parentNode.lastElementChild

   顾名思义，返回最后一个子元素节点。

   注意5、6 IE9以上才支持。

   实际开发中获取第一个和最后一个子元素节点的方法：

   parentNode.chilren[0] ;

   parentNode.chilren[parentNode.chilren.length - 1] ;

   
   

3. 兄弟节点

   node.nextSibling

   返回下一个兄弟节点，包括所有节点，无则null

   node.previousSibling

   返回上一个兄弟节点，包括所有节点，无则null

   node.nextElementSibling

   顾名思义

   node.previousElementSibling

   顾名思义

   3、4方法有兼容性问题，目前解决方法只能是利用1、2自己封装一个函数

   function getNextElementSibling(element) {
   	var el = element;
    	while (el = el.nextSibling) {
    		if (el.nodeType === 1) {
    			return el;
    		}
    	}
    	return null;
   }
   

（3）创建和添加节点

创建节点： document.createElement('tagName')

添加节点：

1. 末尾添加

   node.appendChild(child)

2. 指定元素前添加

   node.insertBefore(child, 指定元素)

   😲添加到父元素子元素中的第一个可以怎么做：

   parentNode.insertBefore(child,parentNode.children[0]);

删除节点： node.removeChild(child) 返回删除的节点

复制节点：

1. 浅拷贝： node.cloneNode()只克隆复制节点本身，不克隆里面的子节点。

2. 深拷贝：node.cloneNode(true)会复制节点本身以及里面所有的子节点。

   5.思维导图

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gKKRbZR0-1634036040661)(DOM那些事/DOM_.jpg)]