一、查询节点
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标签中
<h1 οnclick="callMe()">
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滚动