javascript中Doom操作方法总结

1:Doom组成 (节点篇)

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

节点类型

节点一共分为12种类型

常用节点

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

节点属性

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);

节点关系

父子：.

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]);

替换

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() {// 替换掉li5ul.replaceChild(li, lis[4]);
}, 3000)

克隆

使用方式：

node.cloneNode(bool)

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

<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];// 克隆
var newUl = ul.cloneNode();// 传递true
var newUl2 = ul.cloneNode(true);

2:Doom组成 (绑定篇)

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

innerHTML: 获取元素内部文本。

直接查找绑定

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"));

常用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) {// 兼容IEvar e = e || window.event;// console.log(e);// 指示滚轮滚动方向的属性是： e.wheelDeltaconsole.log(e.wheelDelta);}// 火狐中的滚轮事件document.addEventListener("DOMMouseScroll", function(e) {// console.log(e);// 指示鼠标滚轮方向的属性: e.detailconsole.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中获取不到这个evar 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获取

offsetX、 offsetY

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

clientX、 clientY

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

pageX、 pageY

鼠标位于页面中的位置

screenX、 screenY

鼠标位于屏幕中的位置

IE中的事件对象

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

其实在window.event身上

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

兼容方式：

var e = e || window.event

总结：

在DOM0级事件中

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

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

this指向触发事件对象

在DOM2级事件绑定方式中:

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

this指向触发事件的对象

在attachEvent事件中：

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

this指向window

快捷尺寸

clientWidth、 clientHeight

总结：

clientWidth、clientHeight包含的是: content + padding

#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);
}

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);
}

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

<div id="box"><span>box</span><div id="box1"><span>box1</span><!-- 此时， box2是相对于box进行定位，该元素的parentNode是box1--><div id="box2"><span>box2</span></div></div>
</div>

定位值: offsetLeft offsetTop

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

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

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

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