1、自定义属性操作
获取自定义属性需要使用getAttribute()
//元素
<div id="person" age="10" sex="男">我是皮特</div>
//JS
<script>
var person = document.getElementById("person");
// 固有属性可以直接打点调用
var id = person.id;
//自定义属性需要使用getAttribute()
var age = person.getAttribute("age");
console.log(age);
console.log(id);
</script>
删除自定义属性
//删除自定义属性
person.removeAttribute("sex");
console.log(person); // <div id="person" age="10" weight="50">我是皮特</div>
添加自定义属性
//设置自定义属性
person.setAttribute("weight",50);
console.log(person); // <div id="person" age="10" sex="男" weight="50">我是皮特</div>
也可调用自有属性
var idAttr = person.getAttribute("id");
console.log(idAttr); // person
传递的属性名不需要进行属性名的修改
person.setAttribute("class", "testClassName");
console.log(person) // <div id="person" age="10" weight="50" class="testClassName">我是皮特</div>
2、style样式操作
- 使用 style 属性方式设置的样式显示在标签行内。
- element.style 属性的值，是所有行内样式组成的一个样式对象。
- 样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性。
- 注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名方式书写 backgroundColor。
- 注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位。
3、节点操作
//创建节点
var node = document.createElement("div")
node.innerHTML = "hello45";
// append追加节点
document.body.append(node);
//获取子元素数组 children
var node = document.getElementsByClassName("divList")[0];
var children = node.children;
console.log(children);
4、节点类型
// 元素节点
var testNode = document.getElementById("test");
console.log(testNode.nodeType); // 1
// 属性节点获取
var idNode = testNode.getAttributeNode("id");
console.dir(idNode); // nodeType:2 nodeValue:"test" nodeName:"id"
//修改属性节点，也会直接作用到标签之上
idNode.value = "demo";
//获取子节点
var node = testNode.childNodes;
console.log(node[0].nodeType); // 3
//修改文本节点的值，也会直接作用到标签之上
node[0].nodeValue = '12313123123'
5、兄弟元素节点
var p = my$("p3");
console.log(p)
//获取兄弟节点的前一个
console.log(p.previousSibling)
//获取兄弟节点的下一个
console.log(p.nextSibling);
//获取上一个节点元素
console.log(p.previousElementSibling)
//获取下一个节点元素
console.log(p.nextElementSibling)
6、节点的创建、添加
//创建元素节点
var div = document.createElement("div");
console.dir(div);
//创建属性节点
var myClass = document.createAttribute("class");
console.dir(myClass);
//创建文本节点
var text = document.createTextNode("hello");
console.dir(text)
//将文本节点添加到元素内部
var div = my$("div1");
div.append(text);
/*
* DOM原有节点也可以传给appendChild当参数，做了两个步骤
* 1、将节点从原始位置移除
* 2、添加到新的指定位置
* 原因：内存中这个原有节点只有一个，渲染的时候只能有一个位置
*/
var p2 = my$("p2");
div.appendChild(p2);
6.1 节点常用操作
- parentNode.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾。
- parentNode.replaceChild(newChild, oldChild)：用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
- parentNode.insertBefore(newNode, referenceNode)：在参考节点之前插入一个拥有指定父节点的子节点，referenceNode 必须设置，如果 referenceElement 为 null 则 newNode将被插入到子节点的末尾。
- parentNode.removeChild(child)：移除当前节点的一个子节点。这个子节点必须存在于当前节点中。
6.2 节点拷贝
//浅拷贝
var c1 = test.cloneNode(false);
console.log(c1);
//深拷贝（元素内部的节点也拷贝）
var c2 = test.cloneNode(true);
console.log(c2);
6.3 判断是否有子节点的是那种方式
var test = my$("test");
console.log(test.hasChildNodes()) // true
console.log(test.firstChild != null)// true
console.log(test.childNodes.length > 0) // true
7、元素多事件监听绑定
7.1 addEventListener
使用addEventListener进行事件的添加，添加的事件会逐个进行执行（事件排队）。
var clickMe = document.getElementById("clickMe");
//DOM级事件
clickMe.onclick = function(){
alert(1)
}
//DOM 2级事件绑定方式
/*不支持ie9以下的浏览器*/
clickMe.addEventListener("click",function(){
alert(1);
})
clickMe.addEventListener("click",function(){
alert(2);
})
7.2 attachEvent
使用进行事件监听，注意，事件类型的字符串需要加“on”
/*支持ie10及以下浏览器*/
clickMe.attachEvent("onclick",function(){
alert(1);
})
clickMe.attachEvent("onclick",function(){
alert(2);
})
7.3 注册事件的兼容写法
// 调用
addEvent(clickMe, "click", function(){
alert(1);
})
function addEvent(ele, type, fn){
//ie9以上浏览器使用addEventListener
//IE9以下浏览器使用attachEvent
if(ele.addEventListener){
ele.addEventListener(type, fn);
}else if(ele.attachEvent){
ele.attachEvent("on" + type, fn);
}
}
7.4 事件解绑封裝
- removeEvent
- detachEvent
function removeEvent(ele, type, fn){
if(ele.removeEventListener){
ele.removeEventListener(type, fn);
}else if(ele.detachEvent){
ele.detachEvent("on" + type, fn);
}
}
7.5 DOM事件流冒泡和捕获
//第三个参数如果为true，则是事件捕获
//false:事件冒泡
box1.addEventListener("click", function(){
console.log("box1")
}, true);
box2.addEventListener("click", function(){
console.log("box2")
}, true);
box3.addEventListener("click", function(){
console.log("box3")
}, true);
7.6 事件流三阶段
- 第一个阶段：事件捕获
- 第二个阶段：事件执行过程
- 第三个阶段：事件冒泡
- addEventListener() 第三个参数为 false 时，事件冒泡
- addEventListener() 第三个参数为 true 时，事件捕获
- onclick 类型：只能进行事件冒泡过程，没有捕获阶段
- attachEvent() 方法：只能进行事件冒泡过程，没有捕获阶段
注意：onclick添加的事件，只能冒泡，没有捕获；attachEvent()只能冒泡，没有捕获
7.7 事件冒泡的应用
**事件委托：**将一些子级的公共类型的事件委托给他们的父级添加，在父级内部想办法找到真正触发事件的自底层的事件源。
<ul id="ul">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
// e.target 获取事件源
var ul = document.getElementById("ul");
var liList = ul.children;
// 兼容问题
e = e || window.event;
// 兼容问题
var target = e.target || e.srcElement;
ul.onclick = function(e){
for(var i = 0; i < liList.length; i++){
liList[i].style.backgroundColor = "";
}
target.style.backgroundColor = "pink"
};
7.8 事件对象
- e.eventPhase 查看事件触发时所处的阶段（1、捕获阶段 2、目标阶段 3、冒泡阶段）
- e.target 用于获取触发事件的元素
- e.srcElement 用于获取触发事件的元素，低版本浏览器使用
- e.currentTarget 用于获取绑定事件的事件源元素（等同于this）
- e.type 获取事件类型
- e.clientX/e.clientY 所有浏览器都支持，鼠标距离浏览器窗口左上角的距离
- e.pageX/e.pageY IE8 以前不支持，鼠标距离整个HTML页面左上顶点的距离
7.9 取消冒泡
box3.onclick = function(e){
console.log(3);
//取消默认事件
e.preventDefault();
//取消事件冒泡
e.stopPropagation();
//低版本兼容浏览器使用
e.cancelBubble = true;
}
8、偏移量属性
- offsetParent 偏移参考父级，距离自己最近的有定位的父级，如果都没有定位参考body(html)
- offsetLeft/offsetTop 偏移位置
- offsetWidth/offsetHeight 偏移大小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-phvlVRbU-1611473589857)(C:\Users\张艳杰\AppData\Roaming\Typora\typora-user-images\1611471273933.png)]
- client 系列没有参考父级元素。
- clientLeft/clientTop 边框区域尺寸，不常用
- clientWidth/clientHeight 边框内部大小