javascript中Doom操作方法总结

谁借莪１个温暖的怀抱￠ 2021-09-01 10:28 556阅读 0赞

## 1:Doom组成  (节点篇)  ##

doom是由节点组成，元素标签，它只是节点一中

### 节点类型 ###

节点一共分为12种类型

常用节点

1：元素类型       3:文本类型     8：注释类型   9:文档类型

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

### 节点属性 ###

nodeType:   标记的是节点的类型

nodeName: 标记的是节点的名称

nodeValue: 标记的是节点的值

<div id="box">
    	<div class="one"></div>
    	你好, 明天
    	
    </div>
    
    执行代码：
    // 获取元素
    var box = document.getElementById("box");
    
    // 获取box的所有子节点
    var box_children = getChildNodes(box);
    
    
    //这里封装的函数是在高级浏览器中测试 去掉空白符
    function getChildNodes(dom) {
     
    	/**
    	 * 步骤:
    	 *	1: 循环查看dom的所有子节点， 查看有没有文本类型
    	 *  2: 如果有文本类型， 定义正则表达式去匹配
    	 *  3: 定义一个数组，存储不是空白符的节点
    	 *  4: 将不是空白符的节点存储起来
    	 *  5: 返回该数组
    	 **/
     
    	// 定义数组
    	var arr = [];
     
    	for (var i = 0; i < dom.childNodes.length; i++) {
    		// 查看子节点中有没有文本类型
    		// console.log(dom.childNodes[i].nodeType);
    		// 判断是否是文本节点
    		if (dom.childNodes[i].nodeType == 3) {
    			// 是文本类型
    			// 定义正则表达式去匹配
    			var reg = /^\s+$/;
    			// 验证
    			if (reg.test(dom.childNodes[i].data)) {
    				// 说明是纯空白
    				console.log("第" + i + "项是纯空白");
    			} else {
    				// 说明不是空白符, 进入到数组中
    				arr.push(dom.childNodes[i]);
    			}
    		} else {
    			// 不是文本类型 可以直接进入数组中
    			arr.push(dom.childNodes[i]);
    	}
    	}
    	// 循环完毕之后，返回数组
    	return arr;
    }
    
    
    for (var i = 0; i < box_children.length; i++) {
    
    	// nodeType属性标记的是该节点的类型
    	console.log(box_children[i].nodeType);
    
    	// nodeName属性标记的是该节点的名称
    	console.log(box_children[i].nodeName);
    
    	// nodeValue属性标记的是该节点的值
    	console.log(box_children[i].nodeValue);
    }
    
    // 输出文档类型 文档类型的值
    console.log(document, document.nodeValue);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

### 节点关系 ###

父子：.

father.childNodes // 获取所有的子节点

father. firstChild // 获取第一个子节点

father.lastChild  // 获取最后一个子节点

子父：

.child.parentNode // 获取父节点

兄弟

node.nextSibling  // 下一个兄弟节点

node.previousSibling // 上一个兄弟节点

<div>
       <ul>
         <li>1</li>
          <li>2</li>
           <li>3</li>
            <li>4</li>
        <ul>
    </div>
    
    
    var box = document.getElementById("box");
    
    var ul = box.childNodes[0];
    
    // 获取第一个子节点
    var first = ul.firstChild;
    // console.log(first);      1
    
    
    // 获取最后一个子节点
    var last = ul.lastChild;
    // console.log(last);      4
    
    // 中间的这些元素没有办法直接获取， 但是可以通过childNodes[1 | 2 | 3]来获取
    
    
    // 父节点
    var father1 = first.parentNode;
    var father2 = last.parentNode;
    
    // console.log(father1 === father2);      true
    
    
    // 兄弟之间的关系
    var li3 = ul.childNodes[1];
    
    // 下一个兄弟节点
    var li4 = li3.nextSibling;
    console.log(li4);               3

### **创建元素  上树  下数** ###

使用方式:

document.createElement(type)

type: 字符串， 元素的类型

返回值: 创建出来的元素

<div id=“box”> <div>
    <button id=“btn1”>1</buttom>
    <button id=“btn2”>2<button>
    
    // 获取元素
    var box = document.getElementById("box");
    
    var btn1 = document.getElementById("btn1");
    
    var btn2 = document.getElementById("btn2");
    
    // 创建一个p元素
    var p = document.createElement("p");
    
    
    // 给btn1注册点击事件
    btn1.onclick = function() {
    	// 追加子元素
    	box.appendChild(p);
    }
    
    // 当点击btn2的时候， 移除子元素
    btn2.onclick = function() {
    	box.removeChild(p);
    }

### 插入节点 ###

father.insertBefore(newChild, oldChild)

newChild: 要插入的元素

oldChild: 参照元素

返回值： newChild

最终效果：newChild作为oldChild的兄弟节点存在

<div>
       <ul>
         <li>1</li>
          <li>2</li>
           <li>3</li>
            <li>4</li>
             <li>5</li>
               <li>6</li>
                 <li>7</li>
                   <li>8</li> 
                     <li>9</li>
                        <li>10</li>
        <ul>
    </div>
    
    
    // 获取元素
    var ul = document.getElementsByTagName("ul")[0];
    
    // 获取ul中所有子节点
    var ul_children = getChildNodes(ul);
    
    
    // 创建一个元素
    var li = document.createElement("li");
    // 设置li元素的内部文本
    li.innerHTML = 11;
    
    // insertBefore接收两个参数， 第一个参数是要追加的新的元素， 第二个参数可以是null
    // ul.insertBefore(li, null);  // 此时， 该方法的效果等价于appendChild方法
    
    
    // 我们要将创建出来的li元素追加到li5的前面
    ul.insertBefore(li, ul_children[4]);

![20200906213620178.png][]

### **替换** ###

father.replaceChild(newChild, oldChild)

newChild: 替换上的元素

oldChild: 替换下的元素

返回值： oldChild

<div>
       <ul>
         <li>1</li>
          <li>2</li>
           <li>3</li>
            <li>4</li>
             <li>5</li>
               <li>6</li>
                 <li>7</li>
                   <li>8</li> 
                     <li>9</li>
                       <li>10</li>
        <ul>
    </div>
    
    // 获取元素
    var ul = document.getElementsByTagName("ul")[0];
    
    // 获取所有的li元素
    var lis = document.getElementsByTagName("li");
    
    // 创建一个元素
    var li = document.createElement("li");
    // 设置内部文本
    li.innerHTML = 1111;
    
    
    
    //延时器
    setTimeout(function() {
    	// 替换掉li5
    	ul.replaceChild(li, lis[4]);
    }, 3000)

### **克隆** ###

使用方式：

node.cloneNode(bool)

接收一个参数是布尔值， 默认是false, 表示只复制自身， 如果传递的true， 表示连同子节点一起复制

## 2:Doom组成  (绑定篇) ##

window.οnlοad=function()\{ \}  页面加载执行

innerHTML: 获取元素内部文本。

### 直接查找绑定 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2][]

document.getElementById("id名");     获取节点中id值

getElementsByTagName()\[0\]   表示从整个文档内进行标签查找。常用先获取id在通过id获取id下所有的标签

document.getElementsByClassName        根据class属性获取

getAttribute  读取自定义属性或者自带属性data-   与.语法用法相同

setAttribute() :自定义设置元素属性值

第一个参数属性名  第二个参数属性值

返回值:undefined

<div id="box" data-xi="xixi">盒子</div>
    
    //这里必须获取id值才行 如果只设置自定义属性不设置id会报错 因为你下面的变量获取的上面的id值的节点
    var oBox = document.getElementById("box");
    
    // 通过点语法不能读取元素自定义属性值
    // getAttribute()
    oBox.getAttribute("data-xi"); 
    
    // 设置属性值set将xixi属性值改为haha  没有返回值
    console.log(oBox.setAttribute("data-xi","haha"));

![20200826222148947.png][]

###  **常用Windows 方法：****    **  ###

window.innerHeight　　浏览器窗口的内部窗口高度

window.innerWidth　　浏览器窗口的内部宽度

window.open()　　打开新窗口  
window.close()　　关闭当前窗口

### **location 对象** ###

window.location 对象用于获得当前页面的地址（URL）,并把浏览器重定向到新的页面

常用属性和方法

location.href  获取url  
location.href='url'  //跳转到指定页面  
location.reload()    重新加载页面

### **计时相关** ###

**setTimeout()延时器**

语法: var t = setTimeout('函数','时间')

setTimeout() 方法会返回某个值，在上面的语句中，值被储存在名为t的变量中。假如你希望取消这个setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的地各参数是含有JavaScript 语句的字符串。这个语句可能诸如 'alert('5 seconds!')'  或者对函数的调用，诸如 alertMsg()

第二个参数指示从当前起多少毫秒后执行第一个参数（1000毫秒等于一秒）

**clearTimeout()清除延时器**

语法： clearTimeout(setTimeout\_variable)

// 在指定时间之后执行一次相应函数
    
      var timer = setTimeout(function(){
      alert(123)
      },3000)
    
        // 取消setTimeout设置
       clearTimeout(timer)

**setInterval()定时器**

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

**setInterval()  方法会 不停的 调用函数，直到clearInterval() 被调用或窗口被关闭。 由setInterval() 返回的ID值可用作clearInterval()方法的参数**

**　**语法： setInterval('js语句',时间间隔）

返回值

一个可以传递给 Windows.clearInterval()从而取消对code的周期性执行的值。

**clearInterval()取消定时器**

clearInterval()  方法可取消由setInterval()  设置的timeout。

clearInterval(setinter返回的id值）

// 每隔一段时间就执行一次相应函数
    var timer = setInterval(function(){
       console.log(123);
     },3000)
    
    //取消setInterval设置
    clearInterval(timer);

## 3:Doom组成  (事件篇)  ##

### Doom 0级事件绑定 ###

**事件监听：**

**               绑定数量：**只可以给一个元素的一个事件绑定一个函数

**               执行顺序：**是按照代码的绑定顺序

**是否可以和 2级事件绑定同时存在:** 是

**this指向**：都指向触发事件的对象

onclick 单击

ondblclick 双击

onmouseenter 鼠标进入

onmouseleave 鼠标离开

onmousedown 鼠标按下

onmouseup 鼠标弹起

onload 加载完毕之后

onfocus        元素获得焦点      通常和表单搭配使用  通过value获取焦点       练习：输入框

onblur         元素失去焦点        应用场景：用于表单验证，用户离开某个输入框时，代表已经输入完了，我们可以对它进行验证

onchange       域的内容被改变。        应用场景：通常用于表单元素，当元素内容被改变时触发， （select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

scrollTop   页面卷动值指的是视口上面看不到的部分（被卷起来）    获取页面卷动值的方式：

在新版本的chrome、火狐，IE中都支持： document.documentElement.scrollTop

在旧版本的chrmoe，其它浏览器中支持： document.body.scrollTop

鼠标滚轮事件    onmousewheel   当滚动鼠标滚轮的时候会触发该事件

该事件存在兼容性问题：

在火狐中不支持onmousewheel事件， 支持DOMMouseScroll事件

在非火狐中（chrome、IE）指示鼠标滚轮方向的属性： e.wheelDelta

如果是向下滚动是-120的倍数

如果是向上滚动是120的倍数

在火狐中，指示鼠标滚轮方向的属性： e.detail

如果是向下滚动：3的倍数

如果是向上滚动： -3的倍数

// document绑定onmousewheel事件
    	document.onmousewheel = function(e) {
    		// 兼容IE
    		var e = e || window.event;
    		// console.log(e);
    		// 指示滚轮滚动方向的属性是： e.wheelDelta
    		console.log(e.wheelDelta);
    	}
    
    
    	// 火狐中的滚轮事件
    	document.addEventListener("DOMMouseScroll", function(e) {
    		// console.log(e);
    		// 指示鼠标滚轮方向的属性: e.detail
    		console.log(e.detail);
    	})

### **DOM2级绑定方式** ###

**事件监听：**

**               绑定数量：**可以给一个元素绑定多个函数

**               执行顺序：**是按照代码的绑定顺序

**是否可以和 2级事件绑定同时存在:** 是

**this指向**：都指向触发事件的对象

语法：

dom.addEventListener(type, fn, bool)

type: 事件的类型， 是一个字符串， 注意: 不带on, 比如: click、 mousedown、mouseup

fn: 事件处理函数

bool: 是一个布尔值， 默认是false，表示绑定到冒泡阶段， 如果是true表示绑定到捕获阶段

// 获取元素
    var box = document.getElementById("box");    最外层
    var box1 = document.getElementById("box1");   中间层
    var box2 = document.getElementById("box2");    最里层
    
    // 使用DOM2级绑定方式
    box.addEventListener("click", function() {
    	console.log("box 冒泡");
    }, false)
    
    box1.addEventListener("click", function() {
    	console.log("box1 冒泡");
    }, false)
    
    box2.addEventListener("click", function() {
    	console.log("box2 冒泡");
    }, false)
    
    // 绑定到捕获阶段
    box.addEventListener("click", function() {
    	console.log("box 捕获");
    }, true)
    
    box1.addEventListener("click", function() {
    	console.log("box1 捕获");
    }, true)
    
    box2.addEventListener("click", function() {
    	console.log("box2 捕获");
    }, true)
    
     
    
    捕获: 事件从最顶层元素开始执行， 一层一层往下， 直到最精确的元素
    
    冒泡: 事件从最精确的元素开始执行， 一层一层往上，直到最顶层的元素
    
    事件绑定实现的是先捕获在冒泡
    
    
    //   box捕获  box1捕获  bo2 冒泡  box2 捕获  box1 冒泡  box 冒泡

### ie中元素绑定多个事件 ###

**            绑定数量：**可以给一个元素的一个事件绑定多个函数

**               执行顺序：**优先执行dom0级， 再逆序执行attachEvent事件

**是否可以和 0级事件绑定同时存在:** 是

**this指向**：attachEvent指向window

### **事件的移除方式****    **  ###

**二级**事件绑定移除事件名称: removeEventListener

该方法用于移除addEventListener绑定的事件

使用方式：

dom.removeEventListener(type, fn, bool)

type: 事件类型

fn: 执行的函数

bool： 决定要移除的是捕获阶段还是冒泡阶段

<div id="box"></div>
    <button id="btn"></button>
    
    // 提取到外部并且是声明函数
    function click() {
    	console.log("事件执行了");
    }
    // 使用DOM2级绑定方式
    box.addEventListener("click", click);
    
    // 当点击btn的时候移除事件
    btn.onclick = function() {
    	box.removeEventListener("click", click)
    }

**IE中的移除方式**

事件名称: detachEvent

该方法用于移除attachEvent绑定的事件

使用方式与addEventListener是一致的，只不过没有了第三个参数而已

<div id="box"></div>
    <button id="btn"></button>
    
    // 获取元素
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    
    // 提取到外部并且是声明函数
    function click() {
    	console.log("事件执行了");
    }
    // 使用DOM2级绑定方式
    box.attachEvent("onclick", click);
    
    // 当点击btn的时候移除事件
    btn.onclick = function() {
    	box.detachEvent("onclick", click);
    }

### **阻止冒泡** ###

**总结：**

**在高级浏览器中阻止冒泡的方式： e.stopPropagation()**  
**在IE中阻止冒泡的方式： e.cancelBubble = true**

<div id="box">
        <div id="box1">
           <div id="box2"></div>
       </div>
    </div>
    
    
    
    // 我们希望当点击box2的时候，不要继续往上执行了（不要冒泡）
    box2.onclick = function(e) {
    	// 兼容方式 ie中获取不到这个e
    	var e = e || window.event;
    	console.log("box2");
    
    	// 在高级浏览器中阻止冒泡的方式
    	// console.log(e);
    	// e.stopPropagation();
    
    
    	// 在IE中阻止冒泡的方式
    	e.cancelBubble = true;
    }

### 阻止默认事件 ###

当点击某些标签的时候， 会发生一些默认的行为、事件

比如：

submit会默认提交表单

a标签，如果有href属性，默认跳转页面

当页面出现滚动条的时候， 此时滚动鼠标滚轮的时候， 会默认改变滚动条的位置，这些都是默认行为、事件

<a href="www.baidu.com"></a>
    
    // 获取元素
    var a = document.getElementsByTagName("a")[0];
    
    // 给a元素添加点击事件
    // a.onclick = function(e) {
    	// 兼容方式
    	   var e = e || window.event;
    	// 我们希望当点击的时候不要跳转页面
    
    	// 在高级浏览器中阻止默认事件的方式
    	  e.preventDefault();
    
    	// 在IE中阻止默认事件的方式
    	 e.returnValue = false;
    
    	// 如果是dom0级事件，可以使用return false
    // 	return false;
    // }
    
    // DOM2级事件 
    // 在DOM2级事件中， 不能使用return false 进行阻止默认事件
       a.addEventListener("click", function(e) {
     	// return false;
     	e.preventDefault();
     })
    
    
    // attachEvent IE中
    a.attachEvent("onclick", function(e) {
    	return false;
    })

**总结：**

**在高级浏览器中阻止默认事件的方式： e.preventDefault()**

**在IE中阻止默认事件的方式： e.returnValue = false**

**如果是DOM0级事件绑定方式， 还可以使用return false**

## **4：**Doom组成  (**事件对象与属性**篇) ##

当事件执行的时候，会产生一系列的信息，浏览器将这些信息封装起来并传递到事件函数中 通过函数function中调用参数e获取

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3][]

### **offsetX、 offsetY** ###

是鼠标位于元素内部的距离， 会受到子元素的影响

### **clientX、 clientY** ###

鼠标位于视口中的位置 首屏

### **pageX、 pageY** ###

鼠标位于页面中的位置

### **screenX、 screenY** ###

鼠标位于屏幕中的位置

### **IE中的事件对象** ###

经过测试， 在IE中事件对象没有传递到事件函数中

其实在window.event身上

由于在IE中不能够打开列表， 所以我们是用for in进行遍历

兼容方式：

var e = e || window.event  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 4][]

总结：

在DOM0级事件中

在IE中没有将事件对象传递到事件函数中

在高级浏览器中，可以将事件对象传递到事件函数中

this指向触发事件对象

在DOM2级事件绑定方式中:

事件对象可以传递到事件函数中

this指向触发事件的对象

在attachEvent事件中：

事件对象可以传递到事件函数中

this指向window

### **快捷尺寸** ###

** clientWidth、 clientHeight**

**总结：**

**clientWidth、clientHeight包含的是: content + padding**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 5][]

#box｛
      width:560px;
      heigth:300px;
      padding：10px;
      border：10px soild blue;
    
    ｝
    
    
    <div id="box"></div>
    
    
    // 添加onload事件
    window.onload = function() {
    	console.log("clinetWidth的值是:", box.clientWidth);
    	console.log("clientHeight的值是:", box.clientHeight);
    }

![20200907154149941.png][]

### **offsetWidth、offsetHeight** ###

**总结：**

**clientWidth、clientHeight包含的是: content + padding+border**

#box｛
      width:560px;
      heigth:300px;
      padding：10px;
      border：10px soild blue;
    
    ｝
    
    
    <div id="box"></div>
    
    
    // 添加onload事件
    window.onload = function() {
    	console.log("offsetWidth的值是:", box.offsetWidth);
            console.log("offsetHeight的值是:", box.offsetHeight);
    }

![20200907154601540.png][]

### **clientLeft、 clientTop  边框厚度** ###

#box｛
      width:560px;
      heigth:300px;
      padding：10px;
      border：10px soild blue;
    
    ｝
    
    
    <div id="box"></div>
    
    
    // 添加onload事件
    window.onload = function() {
    	console.log("clientLeft的值是:", box.clientLeft);
             console.log("clientTop的值是:", box.clientTop);
    }

### **定位父元素**offsetParent**与定位值** ###

指向子绝父相中的“父”

它不一定是该元素parentNode

**定位值:** offsetLeft offsetTop

元素的定位值也是经常要使用的值，所以在DOM中也提供了相应的属性用于快速获取

该属性存在兼容性的问题：

在高级浏览器中， 是从子元素的边框外到父元素的边框内

在IE中，从子元素的边框外到父元素的边框外

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/16dd14bf086340e3a9d58565f4d4d9c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/efa8226cd89a452299cf28a52dcf942b.png
[20200906213620178.png]: /images/20210813/62550b04128b474190b90897722d54fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2]: /images/20210813/8bba17905ac340fbb8836dbeee201ab5.png
[20200826222148947.png]: /images/20210813/d1d143331bbf4a349d12e16aabff5c5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3]: /images/20210813/f1b22b2b02c94cec95386e6ca958935b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 4]: /images/20210813/6c034216b4554c8cbb0f356b5402d496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 5]: /images/20210813/2492de3f86f649ff9acf4476b2776577.png
[20200907154149941.png]: /images/20210813/f9cb58d0488443f3bf5eb015ecd9ec0d.png
[20200907154601540.png]: /images/20210813/94ec7f3df8b84574baa2a045a932e45b.png