DOM编程and事件总结

DOM编程

1、查询节点 （document.）

• 通过id获取元素节点

document.getElementById();

• 通过标签名获取元素节点列表

document.getElementsTagName();

• 通过名称获取元素节点列表

document.getElementsByName();

•  通过类名获得元素节点列表

document.getElementsByClass();

•  通过CSS选择器获得元素节点

document.querySelector();

• 通过CSS选择器获得元素节点列表 

document.querySelectorAll();

2、节点的遍历（就是把获得到的节点列表挨个输出）

•  利用for循环遍历

for(var i = 0;i < p.length; i ++){
    console.log(p[i],p[i].innerText);//输出p里的每个i，并显示出文本
}

• 利用forEach来遍历 （转换为数组）

var arr = Array.from(p);//转换为数组
arr.forEach(function(elem){
    console.log(elem);//输出elem
})

• 利用for of 来遍历（转换为数组）

var p = document.querySelectorAll("div p ");
for(item of p){
    console.log(item);
}

注意：ByName，querySelector，querySelectorAll  获得的元素列表不需要转换为数组 

3、 更改层内容

1. 获取元素节点
2. 修改元素的内容文本：p.innerText = "新文本"（不识别html标签）
3. p.innerHTML = "<b>不</b>"；innerHTML获取元素HTML内容
4. 改变文本框内容：input.value = "新文本"

4、修改style样式（相当于用js写了行内样式） 

• p.style.width 宽
• p.style.fontSize 文字大小 

5、元素显示与隐藏 

function toggle() {
	var div = document.getElementById("div");//先获取div
	var display = div.style.display;//获取到display的值（第一次默认获取不到）
	if (display !== "none"){//如果不是为none
		div.style.display = "none";//隐藏
	 }else{
	 	div.style.display = "block";//其他的显示
	}
	alert(div.style.width);//如果是行内样式可以访问到
	alert(div.style.height);//写在style标签里的样式是访问不到的
}

6、通过classList修改类名，修改样式

• classList.add(); 添加类名
• classList.toggle();切换类名
• classList.remove();移除类名
• classList.contains();检查是否包含

7、查看节点关系 

•  parentElement 父节点
• previousElementSibling 上一个兄弟节点
• nextElementSibling 下一个兄弟节点
• children 所有子节点 （children[2]：第二个子节点）
• firstElementChild 第一个子节点 （只能是元素）
• lastElementChild 最后一个子节点
• firstChild 第一个子节点（可以是文本，也可以是元素）
• nextSibling，nextElementSibling 

8、属性修改 

• .getAttribute（"src"）； 获取图片src属性
• .setAttribute（ ）；修改图片属性
• .removeAttribute（ "alt"）；删除alt属性

 9、节点信息

JS的DOM核心编程，每个元素都是一个节点，节点有不同的类型不同的信息。

• nodeName 节点的名称 ：元素节点返回元素标签名大写；文本节点返回#test
• nodeType 节点的类型：元素节点 1；文本节点 3；（1到9都有）
• nodeValue 节点的值：元素节点：none；文本节点：文本内容

10、 节点操作

• document.createElement（tag） 创建节点
• elem.remove（ ）/ elem.parentElement.removeChild（ ） 删除节点
• elem.cloneNode（false） 复制节点，不带子节点
•  elem.cloneNode（true） 复制节点，带子节点
• parent.appendChild（elem） 插入节点（插入到最后面）
• parent.inserBefore（新的节点，相关节点） 把新节点插入到相关节点前面
• parent.replaceChild（新的节点，被替换的节点）

11、表格操作  

row = table.insertRow(index);//创建行
col = row.insertCell(index);//创建列
table.firstElementChild.firstElementChild;//选择第一行

事件 

1、事件的注册 

• 在html标签中

<h1 onclick = "callMe()"></h1>

•  实现js与html分离，多次注册只会执行最后一个

btn.onclick = callMe;
btn.onclick = function(){};

• 可以添加多个，也可以移除

btn.addEventListener("click",callMe);
btn.addEventListener("click",function(){});

2、获取元素的CSS 

• elem.style.样式名 获取/设置行内样式
• document.defaultView.getComputedStyle（elem，null）获取计算好的样式值

3、元素的宽高 

console.log("content+padding",myp.clientHeight);
console.log("content+padding+border",myp.offsetHeight);
console.log("content+padding+滚动距离",myp.scrollHeight);
console.log("clientWidth:内容+padding-滚动工具条宽度",myp.clientWidth);
console.log("offsetWidth:内容+padding+border",myp.offsetWidth);
console.log("scrollWidth:内容+padding-滚动工具条宽度+滚动距离",myp.scrollWidth);

4、 元素与父元素距离

• offsetLeft 与相对父元素的水平偏移值
• offsetTop  与相对父元素的垂直偏移值
• offsetParent 相对父元素（元素的父辈元素有position非static值）

5、元素的滚动距离 

•  elem.scrollTop 垂直滚动距离
• elem.scrollLeft 水平滚动距离

6、元素与视口的编辑 

• elem.getBoundingClientRect（ ）； 

7、事件的绑定与解绑 

• btn1.onclick = function(){};//绑定
  btn1.onclick = null;//解绑

• btn2.addEventListener("click",say);//绑定
  btn2.removeEventListener("click",say);//解绑

8、事件对象 

• event.target 事件源对象
• event.offsetX 、event.offsetY  相对于事件源偏移文字
• event.pageX 、event.pageY  相对于页面偏移位置

 9、事件传递

冒泡:最具体元素最先捕捉到事件,传递给最不具体的元素（document） 

捕获:最不具体的元素先捕获到事件,传递给最具体的元素

默认都是冒泡,使用捕获

• elem.addEventlistener(事件类型,响应函数,是否为捕获)
• elem.addEventListener("click",doit,true)
• event.stopPropagation（ ） 阻止事件传递
• event.preventDefault （ ）阻止默认事件

10、键盘事件 

• event.keyCode 键盘对应数组编码
• event.key 键盘名称
• event.which 等于 .keyCode
• keyPress 按下弹起
• keyUp 键盘弹起
• keyDown 键盘按下

11、鼠标事件 

• mouseover 鼠标移入
• mouseout 鼠标移出
• mousedown 鼠标按下
• mouseup 鼠标弹起 
• mousemove 鼠标移动
• click 单击
• dblclick 双击

12、表单事件 

• change 值发生变化
• input 正在输入
• focus 获取焦点
• blur 失去焦点 

13、页面事件 

• load 加载
• resize 窗口变化
• scroll 滚动 

14、事件代理 

把事件注册到其共有的父元素上，通过事件的冒泡机制

• event.target 实现目标（本来注册给每个元素，注册到其共有的父元素上）