一、查询节点

getElementByid()--通过id获取元素

getElementByTagName()--通过标签名获取节点列表

getElementsByName()--通过名称获取列表

getElementsByClassName()--通过类名获取列表

querySelector()--通过css选择器获取节点

querySelectorAll()--通过css选择器获取节点列表

二、遍历节点

1、for循环

var ps=document.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
      console.log(ps[i])
}

2、转换为数组Array.from() for.Each

var ps=document.querySelectorAll("div p");
ps.forEach(function(item){
     console.log(item)
})

3、转换为数组for of

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

三、改变层内容

innerText--获取/改变文本内容

innerText--获取/改变HTML内容

四、获取表单事件

value获取/改变表单的值

checked修改CheckBox是否勾选

五、通过style修改样式

elem.style.width="400px" 修改样式

elem.style.fontSize="48px" 注意使用驼峰命名方式

elem.style.width获取行内样式

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

classList.toogle()切换类名

classList.add()添加类名

classList.remove()删除类名

classList.contains()检测是否包含类名

七、节点关系

父子

parentElement父节点

children所有子节点

firstElementChild第一个子节点

lastElementChild最后一个子节点

兄弟

previousElementChild上一个兄弟

nextElementSibling下一个兄弟

八、属性操作

getAttribute获取属性

setAttribute设置属性

removeAttribute移除属性

九、节点信息

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

1、nodeName节点的名称

元素节点：返回的是元素标签名大写例P

文本节点：返回#text

2、nodeType节点的类型

元素节点：1

文本节点：3

3、nodeValue节点的值

元素节点：none

文本节点：文本内容

十、节点操作

创建节点

document.createElement()

删除节点

elem.remove()

elem.parentElment.removeChild()

复制节点，不带子节点

var elem2=elem.cloneNode(false)

复制节点，带子节点

var elem3=elem.cloneNode(true)

插入节点

parent.appendChild(elem)将elem插入到parent最后面

parent,insertBefore(新的节点，相关节点)把新的节点插入到相关节点的前面

替换节点

parent,replaceChild(新的节点，被替换的节点)

十一、表格操作

创建行

row=table.insertRow(index)

创建列

col=row.insertCell(index)

设置列的内容

col.innerText="xxx"

选择第一行

table.firstElementChild.firstElementChild

十二、select下拉框

创建一个option

var option=new OPtion(text,value)

插入一个option

select.add(option,before)

十三、事件的注册

DOM0在html标签中

DOM1实现js与html分离

btn.onclik=callMe;

btn.onclick = function(){}
(多次注册，只会执行最后一个)

DOM2 可以添加多个，也可以移除
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})

移除全部click
btn.removeEventListenter("click")
移除一个
btn.removeEventListenter("click",callMe)

十四、获取元素的css

行内样式
elem.style.样式名
获取/设置行内样式

计算好的样式
document.defaultView.getComputedStyle(elem,null).样式名
获取计算好的样式值;样式名用驼峰写法 FontSize

十五、元素的宽与高

clientWidth:内容+padding（-工具条宽）

offsetWidth:内容+padding+边框

scrollWidth

没有滚动条同clientWidth
内容+padding-工具条+滚动的距离

clientHeight;offsetHeight;scrollHeight

十六、元素与父元素距离

offsetLeft 与相对父元素的左偏移值
offsetTop 与相对父元素的垂直偏移值

offsetParent 相对父元素
元素的父辈元素有position非static值

十七、元素的滚动距离

elem.scrollTop
elem.scrollLeft

浏览器滚动距离
document.documentElement.scrollTop
document.body.scrollTop

十八、元素与可视窗口的编辑

elem.getBoundingClientRect()
Bounding边界
Client客户端
Rect矩形

事件

1、绑定

btn.onclick = function(){}

btn.addEventListener(type,funName)

2、解绑

btn.onclick = null

btn.removeEventListener(type,funName)

匿名函数不能解绑

3、事件对象

event.target
事件源对象

event.offsetX
event.offsetY
相对于事件源偏移文字

event.pageX
evnet.pageY
相对于页面偏移位置

5、事件传递

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

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

默认都是冒泡,使用捕获
elem.addEventlistener(事件类型,响应函数,是否为捕获)
elem.addEventListener("click",doit,true)

阻止事件传递
event.stopPropagation()

阻止默认事件
event.preventDefault()

6、键盘事件

keypress 按下弹起

keyup 键盘弹

keydown 键盘按下

event.keyCode 键对应数字编码
event.key键盘的名称
event.which等于keyCode

7、鼠标事件

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

8、表单事件

change 值发生变化
input 正在输入

focus 获取焦点
blur 失去焦点

9、页面事件

load加载
resize 窗口变化
scroll滚动

DOM知识点总结