DOM知识点总结

知识点罗列：
1.获取dom元素的方式
2.获取dom元素后的相关操作
3.dom元素创建
4.dom元素事件
5.dom事件的监听
6.事件的执行参数
7.事件冒泡与捕获

一、获取dom元素的方式
dom元素共有8种获取方式，其中有4种动态获取，2种静态获取，2个固有对象获取。
1.4种动态获取及使用。
动态获取：后期代码添加的也可以获取。
（1）通过class 类名称获取元素，返回的是一个集合。

 document.getElementsByClassName() 

（2）通过元素的name属性获取元素，返回的是一个集合。

document.getElementsByName()

（3）通过元素的id获取，返回的是一个对象。

document.getElementById()    

（4）通过元素名称获取，返回的是一个集合。

 document.getElementsByTagName() 

使用：

 var x=document.getElementsByClassName("名称");  

 //集合里面获取某一个对象  使用键来获取
    console.log(x[0]);
    console.log(x[1]);
    console.log(x[2]);

 var x=document.getElementsByName("名称"); 
  console.log(x[0]);
  console.log(x[1]);
  console.log(x[2]);
    
var x=document.getElementsByTagName("名称");
  console.log(x[0]);
  console.log(x[1]);
  console.log(x[2]);
  
var btnid=document.getElementById("名称");
  console.log(btnid);

2.两种静态获取及使用。
静态获取：只能获取到初始化时的元素，后期添加的元素无法获取。
（1）document.querySelector()
返回的是一个单个对象。
（2）document.querySelectorAll()
返回的是一个列表。
使用：单个对象获取的静态方法，参数只能写选择器，也可能对应多个，但只取第一个。

var x=document.querySelector("选择器名");
console.log(x);

var x=document.querySelectorAll("选择器名");
console.log(x);

（3）固定对象获取
body：document.body
HTML元素document.documentElement
使用：

console.log(document.body);
console.log(document.documentElement);

二、获取dom元素后的相关操作
1、修改或者设置name：

x.name = "名称";  

2、文本操作：修改或设置文本

 btn.innerText="修改文本";  
 //操作的文本
 btn.innerHTML="修改文本";   
 //获取元素里面的子内容

 console.log(btn.innerText);
 //获取的是当前元素的文本值
 console.log(btn.innerHTML);
 //获取的是当前元素的子内容  包含html标签

3、样式属性操作：元素的行内样式

console.log(btn.style.color);//行内样式的获取方式
//获取元素的非行内样式
console.log(window.getComputedStyle(btn).width);
console.log(window.getComputedStyle(btn).height);

//给元素设置样式、
x.style.width="200px";
x.style.backgroundColor="pink";

//一次性设置多个样式
x.style="color:red;width:100px;height:30px;line-height:30px";

4.自定义设置属性及获取：

//设置自定义属性
x.setAttribute("data-index", 0);
//获取自定义属性
console.log(btn.getAttribute("data-index"));

5、节点操作

```css
 var menu = document.querySelector(".menu");
 console.log(menu);
 
  //获取里面的子集
    console.log(menu.children); 
    //获取父元素的所有子集元素
    console.log(menu.childNodes); 
    //获取的是元素的子集节点，包含文本、元素、符号
    console.log(menu.firstChild); 
    //获取元素的第一个子节点
    console.log(menu.firstElementChild);
    //获取元素的第一个子元素
    console.log(menu.lastChild);  
    //获取元素的最后一个子节点
    console.log(menu.lastElementChild);
    //获取元素的最后一个子元素

   //元素的父元素
    console.log(menu.parentNode);
    //获取当前元素的父节点
    console.log(menu.parentElement);
    //获取的是当前元素的父元素

6、字符串大小写转化

 大写转化为小写 ：
 toLowerCase() 
 小写转大写：
 toUpperCase()

三、dom元素创建

1、创建dom元素

 var ele=document.createElement("button");
    console.log(ele);

2、相关属性设置

ele.innerText="按钮";
ele.className="btn";
ele.setAttribute("data-index","0");
ele.style.backgroundColor="#000";

3、dom元素类的获取方案

console.log(ele.className);
//直接属性获取元素的class

console.log(ele.classList);
//获取元素的类的集合

ele.classList.add("btninfo");
//给元素添加类

//ele.classList.remove("btn");
//移除类

console.log(ele.classList.contains("btn"));
//检测是否包涵某个类，返回值是true/false

ele.classList.length  //输出类个数

四、dom元素事件
事件 ：属于对象的被动行为；主动行为称方法 ，被动的行为称事件。
在js里面写事件 前面必须带on
鼠标事件： mouseover mouseup mousedown click dbclick mouseleave mouseout mousemove mouseenter mousewheel（滚轮）
键盘事件：keypress keydown keyup
表单事件：focus blur submit change input(获取用户输入事件)
浏览器事件 scroll load error resize contentmenu(右键打开浏览器菜单)
剪贴版事件 cut（剪贴） copy（复制） paster(粘贴) selectstart 选择事件

五、dom事件的监听

 var btn = document.getElementById("btn");
 //监听btn的click事件
//监听的时候事件不写on,使用 "click" ,而不是使用 "onclick"

六、事件的执行参数

    var btn=document.getElementById("btn");
    btn.οnclick=function (event){
        console.log(event);
    }
  event  代表事件的执行参数对象

七、事件冒泡与捕获

事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中。
1、冒泡
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：由里向外。 <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
2、捕获
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：由外向里 <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

3、useCapture参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。