大前端基础~DOM

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); // 
我是皮特

添加自定义属性

  //设置自定义属性
  person.setAttribute("weight",50);
  console.log(person); // 
我是皮特

也可调用自有属性

var idAttr = person.getAttribute("id");
console.log(idAttr); // person

传递的属性名不需要进行属性名的修改

person.setAttribute("class", "testClassName");
console.log(person) // 
我是皮特

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 边框内部大小