Dom小知识
1、查找Dom节点
1、获取所有的节点 box.children
2、获取第一个子节点 box.fristChild
3、获取最后一个子节点 box.lastChild
4、获取前一个兄弟节点 box.previousSibling
5、获取后一个兄弟节点 box.nextSibling
6、获取父节点 box.parentNode
2、查找元素
- 通过关系查找
1、子元素 box.children
2、第一个子元素 box.fristElementChild
3、最后一个子元素 box.lastElementChild
4、前一个兄弟元素 box.previousElementSibling
5、后一个兄弟元素 box.nextElementSibling
6、父元素 box.parentElement
- 通过属性查找
1、id document.getElementById("")
2、class document.getElementByClassName("")
3、tagName document.getElementByTagName()
4、name document.getElementByName()
5、选择器 document.querSelector("")
6、选择器 document.querySelectorAll("")
3、操作属性
- 标准属性
1、box.属性名
- 自定义属性
<div data-val></div> box.dataset.val
- 通过 api
box.getAttribute("")
设置
<!-- 改变颜色：<font color="red">中间写上想说的话</font> -->
box.setAttribute("属性名","属性值")
删除
box.removeAttribute("属性名")
切换
box.toggleAttribute("属性")
判断是否包含
box.hasAttribute("属性名")
- 操作 class 属性
- box.className
- box.classList
1、box.classList.add("")
2、box.classList.remove("")
3、box.classList.replace("")替换
4、box.classList.toggle("")切换
5、box.classList.contains("")
- 操作 style
- box.style
1、box.style="fontize:30px;color:blue"
2、box.style.backgroundColor="blue"
4、操作元素
- 添加元素
1、document.write("")
2、box.innerHTML
3、var rel=document.createElement("tagName") box.appendChild(rel)
- 删除元素
1、box.removeChild("rel");
2、box.innerHTML="";
- 修改元素
1、var rel=document.createElement("tagName") box.insertBefore("newrel","targetrel")
修改元素内容
1、box.innerHTML
2、box.innerText
3、box.textContent
5、事件
- 事件属性
- 绑定事件属性的三种方法
1、<div onclick=fn(event)></div>
function fn(event){}
2、<div id="box"></div>
var box=document.getElementById("box");
box.onclick=function(event){};
3、box.addEventListente("click",function(event){},false(true))
- 事件属性与事件属性的区别
1、事件属性多个相同的会被覆盖，事件监听不会被覆盖
2、事件属性支持冒泡,事件监听可以在捕获或冒泡阶段监听
3、事件属性移除事件处理程序,box.onclick=null; box.removeEventListenter("click",fn);
- 事件流
事件在元素之间的传递顺序 三个阶段,捕获阶段 目标阶段 冒泡阶段
- 事件对象
当发生事件交互时，系统会将所有的关于事件的信息(事件类型,鼠标的位置等)都放在 event 对象中,并传传递过来
事件类型
1、鼠标事件
- click（点击）
- dbclick（双击）
- mouseover（鼠标悬浮）
- mouseenter（鼠标移入）
- mouseleave（鼠标移出）
- mouseout（鼠标离开）
- mousedown（鼠标按下）
- mouseup（鼠标松开）
- mousemove（鼠标移动）
2、键盘事件
- keydown（键盘按下）
- keyup（键盘松开）
- keypress（按键）
3、表单事件
- focus blur input change selected
4、对象事件
- onload onerror onresize onscroll
5、拖拽事件
- drag dragstart dragend
- 关于容器 dragenter dragover dragleave drop
- 注意：drop 之前需要在 dragover 阻止事件的默认行为 e.preventDefault
元素的尺寸和位置
1、元素的尺寸
box.clientWidth box.offsetHeight
2、元素的位置
box.offsetTop box.offsetLeft box.clientTop(边框的宽度)
3、window.innerWidth(包含滚动条) document.documentElement.clientWidth document.body.clientWidth
4、电脑屏幕的宽度 window.screen.width screen.availWidth
- 以上都是只读
- 获取 css 中的样式 getComputedtyle("box",null).width
5、内容的高度 box.scrollHeight 偏移量 box.scrollTop
鼠标的位置
1、e.pageY 相对于页面的卷去部分
2、e.clientY e.y 浏览器窗口的左上角
3、e.offsetY 目标元素
4、e.layerY 相对于离自己最近的非静态定位的祖先元素的位置
5、screenY 电脑屏幕
