DOM基础知识概括

===== DOM:document Object model 文档对象模型

DOM的版本 DOM0 => DOM4

DOM0级在DOM标准规范出台之前的规范。

DOM0和DOM2级使用最广泛。

======DOM节点
节点也被称为node,一个完整的文档中存在文本节点，属性节点和元素节点。

节点类型	nodeName	nodeType	nodeValue
元素节点	标签名（大写）	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容
========DOM0查找节点

1.document.body 获取body元素。

2.document.images 获取文档中所有图片标签，以数组的形式保存

3.document.links 获取文档中所有a标签，以数组的形式保存

4.document.forms 获取文档中所有表单元素，以数组的形式保存
=========快速查找

1.document.getElementById(); 通过id查找(重)

2.document.getElementsByClassName(); 通过class查找，以数组的形式保存

3.document.getElementsByTagName(); 通过标签查找，以数组的形式保存

4.document.getElementsByName()； 通过name属性查找

5.document.querySelector(); 查找符合条件的第一个。（通过选择器查找）

6.document.querySelectorAll(); 查找所有符合条件的，以数组的形式保存。
==========通过关系查找节点

1.查找父元素：child.parentNode。

2.parent.firstChild 获取第一个节点，但不定获取到是文本节点还是元素节点。

3.parent.lastChild

4.ele.previousSibling 查找前一个兄弟

5.ele.nextSibling 查找下一个兄弟
===========通过关系查找元素

1.parentElement 查找父元素

2.parent.firstElementChild 查找第一个子元素

3.parent.lastElementChild 查找最后一个子元素

4.ele.previousElementSibling 查找上一个元素

5.ele.nextElementSibling 查找下一个元素

6.parent.children 查找所有子元素

============操作节点
1.创建元素节点
document.createElement("div");
2.创建文本节点
document.createTextNode("wang")
3.创建属性节点
document.createAttribute("id")
4.给属性节点赋值
attr.value = "box";
5.添加节点 （类似于数组的push（））
div.appendChild(childNode);
6.添加属性节点
div.setAttributeNode("box");
7.快速添加属性节点
div.id = "box"; div.className = "box";
8.在某元素之前插入。(父级上)
parentNode.insertBefore(newNode,oldNode);
9.删除子节点
div.removeChild(h1);
10.innerText（文本节点） 和 innerHTML（标签元素这些）。

11.获取属性 ele.getAttribute("id")。

12.自定义属性以data- 开头，获取：dataset.XX 设置：dataset.XX = value;

13.获取，设置特殊写法的属性：设置获取类名：ele.className

​ 设置获取 for： ele.htmlFor。htmlFor 属性设置或返回 label 的 for 属性的值。 for 属性指定 label 要绑定到 哪一个表单元素。

14.设置属性:ele.setAttribute(attr,value)；

15.删除属性:ele.removeAttribute(ele)；

16.ele.classList:查询所有class，ele.classList.add("div"):添加class
let ele = document.querySelector("#box"); // console.log(ele.getAttribute("id")); // console.log(ele.dataset.aa); ele.setAttribute("id","bbb"); console.log(ele.getAttribute("id"));//bbb ele.removeAttribute("class"); console.log(ele.getAttribute("class"));//null ele.classList.add("div"); console.log(ele.className); console.log(ele.classList);
=========== 样式
1.ele.style.XXX = "" (注意驼峰命名);
let box = document.querySelector("#box");
// box.style.width = "300px";
// box.style.height = "200px";
2.ele.style.cssText = `` 常规的css的书写语法。
box.style.cssText = width : 50px; height : 50px;
3.Object.assign(target,obj):把obj这个对象的所有样式赋值给目标对象。注意驼峰
Obj.assign(box.style,{ width:"100px"; height:"100px" })
4.item.classList.toggle(“类名”):替换（即有的不管，没有的就加上）；
let li_arr = document.querySelectorAll("ul>li"); for (let i = 0; i < li_arr.length; i++) { li_arr[i].onclick = function () { // li_arr[i].className == "red" ? li_arr[i].className = "" : li_arr[i].className = "red"; li_arr[i].classList.toggle("red"); } }
5.获取计算后的值：getComputedStyle（ele）;
let div = document.querySelector("#div"); console.log(getComputedStyle(div).width);
6.获取content + padding的值：
console.log(div.clientHeight);//100
7.获取content + padding + border : ele.offsetWidth
console.log(div.offsetWidth);// 102
8.ele.offsetLeft:距离左边的位置
console.log(div.offsetLeft); //120
==========事件
事件驱动三要素：事件源，事件类型，事件处理函数。

添加事件监听器

1.标签里添加
<input type = "button" onclick = "fn()"> //不推荐
2.标准 DOM0 级添加方式 ele.onclick = function(){ }

3.DOM2级添加方式

ele.addEventListener('eventType',function(){ },boolean)

4.DOM0级的绑定方式只能确定一个同类型事件，DOM2级可以绑定多个

删除事件

1.DOM0级 ele.onclick = null;

2.DOM2级 将事件处理函数退出，使用removeEventListener('eventType',function(){ });

事件分类

1.window事件

onload 加载事件

onscroll 滚动事件

onresize 窗口事件

2.鼠标事件
onmousedown 鼠标按钮被按下。

onmouseenter 当鼠标指针移动到元素上时触发。 (用得多一点)

onmouseleave 当鼠标指针移出元素时触发

onmousemove 鼠标被移动。

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开。

onmouseup 鼠标按键被松开。

enter 和 over 与事件流有关（冒泡：子集也能触发父级上的事件）

3.键盘事件

onKeydown :某个键盘按键按下。

onKeypress: 某个键盘按键按下松开。

onKeyup:某个键盘按键被松开。

===========事件流

事件再页面上传播的顺序。

绑定方式：

DOM0：内 -> 外。

DOM2：内 -> 外（默认：false）；如果为：true时 外 -> 内。

浏览器发展到第四代

IE：内到外 冒泡型事件流

网景：外到内 捕获型事件流

W3C统一，DOM事件流同时支持捕获跟冒泡。
============ 事件对象event
脚本引擎自动传给事件处理函数

red.onclick = function(event){

​ console.log(event)

}

低版本IE window.event

red.onclick = function(event){

​ let e = event || window.event //兼容

}

=========event.target：获取触发事件的目标元素

=========this指向事件源

event键盘事件

1.event.key:返回按键名称。

2.event.keyCode:返回字符键码。

3.event.altKey,event.ctrlKey,event.shiftKey返回布尔值

event鼠标事件
1.event.clientX和event.clientY:返回鼠标事件发生时与浏览器x,y坐标。

2.event.pageX和event.pageY：返回鼠标事件发生时与页面x,y坐标。

3.event.screenX和event.screenY：返回鼠标事件发生时与屏幕x,y坐标。

4.event.offsetX和event.offsetY：返回鼠标事件发生时与事件源x,y坐标。

============事件委托

利用冒泡机制，只指定一个事件处理程序，就可以管理某一类所有事件。

把具体子节点上发生的事，交给更大范围的，不是动态生成的祖先节点去处理。

何时使用：

1.子节点过多。

2.子节点是动态生成的。

函数里传入event对象,event.target。
==============表单

1.const form = document.getElementById();

2.const form = document.querySelector();

3.const form = document.forms[index];

4.const form = document.formName // form的name值

==========表单元素

有value的值才能为表单元素,label,datalist不是属于表单元素。

==========表单字段 表单域

1.input

2.textarea

3.select

4.button

5.fildset

=========标志性属性
1.disabled 禁用 在html里只有写属性就能生效，在js里要为属性赋布尔值。

2.autofocus 自动获取焦点

3.selected 下拉默认选中

4.checked 单选多选默认选中

5.readonly 只读属性

6.multiple 下拉列表的多选（按住shift）

=========表单事件

1.onfocus 聚焦

2.onblur 失去焦点

3.onchange 内容改变失焦，则触发

4.oninput 输入，内容发生改变，不需要失焦

5.onsubmit 提交

6.onreset 重置

=========下拉列表
1.获取所有的option: select.options

2.获取某一个option:select.options[index]

3.获取选中的option:select.selectedIndex 返回选中的那个的下标

4.获取选中的option的value值，select.value

5.构造函数 new Option(innerText,value);创建

6.parentNode.options.add(newOpt); 新增到父节点中

7.parentNode.options.remove(index);删除某个option。

8.parentNode.options[index].value = "xxx"; //修改

​ parentNode.options[index].text = "AAA";