Javascript之DOM操作

DOM操作

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树

DOM树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

一、查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

1、通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

实例

javascript 复制代码

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null

2、通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有

元素：

实例

javascript 复制代码

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

3、通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

实例

javascript 复制代码

var x=document.getElementsByClassName("intro");

4、通过name名找到 HTML 元素

本例通过 getElementsByName 函数来查找 name="username" 的元素：

实例

javascript 复制代码

<script>
  onload = function () {
    var name = document.getElementsByName('username')[0];
    name.value = 123
    console.log(name);
	}
</script>
<input type="text" name="username">

5. 通过css选择器进行查找

document.querySelector 是 JavaScript 的一个方法，用于在文档中选择匹配特定 CSS 选择器的元素。

使用 document.querySelector 方法的语法如下：

复制代码

document.querySelector(css选择器)

其中，css选择器 是一个字符串，表示要选择的元素的CSS选择器。可以使用标签名、类名、ID、属性等来指定元素。

该方法返回匹配的第一个元素，如果没有匹配的元素，则返回 null。

以下是一些示例：

通过标签名选择元素：

复制代码

var element = document.querySelector("div");

通过类名选择元素：

复制代码

var element = document.querySelector(".my-class");

通过ID选择元素：

复制代码

var element = document.querySelector("#my-id");

通过属性选择元素：
复制代码
```
var element = document.querySelector("[name='my-name']");
```
需要注意的是，document.querySelector 只会返回匹配的第一个元素。如果要选择所有匹配的元素，可以使用 document.querySelectorAll 方法。

二、HTML DOM - 改变 HTML

1、改变 HTML 内容（innerHTML/innerText）

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容：

实例

javascript 复制代码

<html>
<body>
	<p id="p1">Hello World!</p>
<script>
	document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>

实例讲解：

上面的 HTML 文档含有 id="p1" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="p1" 的元素
JavaScript 更改此元素的内容 (innerHTML)

document.getElementById(id).innerText=新的文本内容

注意:

innerHTML是可以获取节点内标签和内容
innerText 只能获取节点内的文本内容
innerHTML可以设置html和文本一起的内容 HTML标签会被浏览器所解析
innerText不可以设置html和文本一起的内容 HTML标签不会被浏览器所解析

2、改变 HTML 属性 (attribute)

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id ).attribute=新属性值

本例改变了 <img> 元素的 src 属性：

javascript 复制代码

<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<img src="http://img.zcool.cn/community/01f9ea56e282836ac72531cbe0233b.jpg@2o.jpg" onclick="this.src='http://pic.58pic.com/58pic/13/80/78/35V58PICrWD_1024.jpg'" alt="">

注意：在jQuery里不能改变input的type类型出于安全性，只能是只读如更改input的type

js设置密码的显示隐藏

javascript 复制代码

<input type="text" value="" name="xxx">
<button onclick="pas();">更改为密码</button>
<button onclick="text();">更改为文本显示</button>

function pas(){
  var i = document.getElementsByTagName('input')[0];
  i.type = 'password'
}
function text(){
  var i = document.getElementsByTagName('input')[0];
  i.type = 'text'
}

script>
        function change() {
            var input = document.getElementsByTagName('input')[0];
            var span = document.getElementsByTagName('span')[0];
            if(span.innerHTML == '显示'){
                input.type = 'text';
                span.innerHTML = '隐藏';
            }else{
                input.type = 'password';
                span.innerHTML = '显示';
            }
        }
    </script>
</head>
<body>
密码<input type="password"><span onclick="change();">显示</span>
</body>

三、HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

1、改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id ).style.property =新样式

实例

javascript 复制代码

<body>
  <p id="p1">Hello World!</p>
  <p id="p2">Hello World!</p>
</body>
<script>
  document.getElementById("p2").style.color="blue";
  document.getElementById("p2").style.fontFamily="Arial";
  document.getElementById("p2").style.fontSize="larger";
 document.getElementById("p2").style.backgroundImage="url(2.jpg)";
</script>

获取生效style样式

window.getComputedStyle("元素", "伪类");

style = window.getComputedStyle(box, null); //支持IE9+及非IE浏览器

style = window.getComputedStyle(box, null).width; 获取box的width属性值
- 与style的区别
  
  box.style.xxx 只能获取内联样式
getComputedStyle 获取的生效样式可以获取全局的样式

实例

javascript 复制代码

    <style>
        #div{
            width:200px;
            height: 200px;
        }
    </style>
    <script>
        window.onload = function (ev) {
            var div = document.getElementById('div');
            // console.log(div.style.backgroundColor)
            // console.log(div.style.width)
            var style = window.getComputedStyle(div,null);
            console.log(style.width);
            console.log(style.height);
            console.log(style.backgroundColor);
        }
    </script>
</head>
<body>
<div id="div" style="background-color: red;"></div>
</body>
</html>

2、设置多个css样式

设置cssText

javascript 复制代码

element.style.cssText = "样式1;样式2..."
div.style.cssText = 'width:200px;height: 200px;background-color: red';

设置style的属性

javascript 复制代码

element.setAttribute('style', 'height: 100px !important');

设置id或者class名称

设置id

javascript 复制代码

element.setAttribute('id, 'id名称');
element.id = id名称；

设置class

javascript 复制代码

element.setAttribute('class, 'class名称');
element.className = class名称；
// 设置多个class
element.className = '样式1 样式2';
element.setAttribute('class','样式1 样式2')

通过add方法添加多个类名

javascript 复制代码

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

javascript 复制代码

<style>
  .d1{color:red;}
  .d2{border: 1px solid red;}
</style>
<script>
  onload = function () {
  	document.getElementById("myDIV").classList.add('d1', 'd2');
  	document.getElementById("myDIV").classList.remove('d1');
  }
</script>
</head>
<body>
<div id="myDIV">div</div>
</body>

3、使用事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

元素被点击。
页面加载完成。
输入框被修改。

在接下来的章节，你会学到更多关于事件的知识。

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

实例

javascript 复制代码

<!DOCTYPE html>
<html>
<body>
	<h1 id="id1">我的标题 1</h1>
  <button type="button" 
  onclick="document.getElementById('id1').style.color='red'">
  点我!</button>
</body>
</html>

四、HTML DOM 事件

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

οnclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

1、onclick 点击事件

onclick = javascript

实例

javascript 复制代码

<!DOCTYPE html>
<html>
<body>
	<h1 onclick="this.innerHTML='lucky!'">点击文本!</h1>
</body>
</html>

本例从事件处理器调用一个函数：

οnclick="changetext(this)"

实例

javascript 复制代码

<script>
  function changetext(id)
  {
      id.innerHTML="lucky!";
  }
</script>
</head>
<body>
	<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

2、使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

javascript 复制代码

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

阻止右键菜单默认行为：

在之前使用event对象的button属性时, 点击鼠标右键会弹出系统菜单, 如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单
javascript 复制代码
```
document.oncontextmenu = function(){
      console.log("右键被按下");
      return false;
}
```
不使用监听事件的停止传播(不再派发事件)
当标签进行嵌套时

event.stopPropagation();[prɑpəˈɡeʃən]
javascript 复制代码
```
<script>
        onload = function(){
            var divOne = document.getElementById('divOne');
            var divTwo = document.getElementById('divTwo');
            divOne.onclick = function(){
                alert('点击了one');
            }

            divTwo.onclick = function(e){
                alert('点击了two');
                e.stopPropagation();//停止时间的传播(不在派发事件)
            
        }
    </script>
</head>
<body>
<div id="divOne">one
    <div id="divTwo">two</div>
</div>
```
e是事件，在firefox中只能在事件现场使用window.event，所以只有把event传给函数使用。为了兼容FF和其它浏览器，一般会在函数里重新给e赋值：

e = window.event || e;

也就是说，如果window.event存在，则该浏览器支持直接使用window.event，否在就是不支持，不支持就使用传进来的e。

e是event，其中包含鼠标事件的各种信息

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

3、onload 和 onunload 事件

onload 事件会在页面或图像加载完成后立即发生。

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload(了解) 事件可用于处理 cookie。

onunload 关闭当前页面的操作时候的操作(了解)

onload 实例

javascript 复制代码

<script>
  onload = function() {
  console.log(document.getElementById('div'))
}
</script>
<body>
<div id="div">one</div>
</body>

实例:

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
	<p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>
</html>

4、onchange 当文本框(input\select或 textarea)内容改变且失去焦点后触发。

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

html 复制代码

<script>
  function upperCase(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
  }
</script>
<body>
	<input type="text" id="fname" onchange="upperCase()">
	<select onchange="alert(this.value);">
      <option value="1">北京</option>
</body>    
----------------------------------------------------------------------------------------
<script>
  function upperCase(this){
    this.value=this.value.toUpperCase();
  }
</script>
<body>
<input type="text" id="fname" onchange="upperCase(this)">
</body>    
<input type="text" id="fname" onchange="this.value = this.value.toUpperCase();">

onselect：当用户选择文本框(input 或 textarea)中的内容触发

javascript 复制代码

<script>
  function showMsg(){
    alert("您选中了一些文本！");
  }
</script>
</head>
<body>

一些文本：<input type="text" value="请选中我！" onselect="showMsg()">

<p>函数 showMsg() 在输入字段中的文本被选中时触发。此函数显示一段消息。</p>

表单验证

javascript 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /*点击下拉框进行调用 获取当前的值*/
        function get_val(v) {
            console.log(v)
        }
        /*点击注册进行验证*/
        function check() {
            console.log(document.getElementById('address').value)
            return false;
        }
    </script>
</head>
<body>
<form action="" onsubmit="return check();">
    <select name="" id="address" onchange="get_val(this.value)">
        <option value="1001">北京</option>
        <option value="1002">上海</option>
        <option value="1003">深圳</option>
    </select>
    <input type="submit" value="submit">
</form>
</body>
</html>

5、 onfocus/onblur 获取焦点/失去焦点

输入框获取焦点的事件

实例:

javascript 复制代码

<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>

输入你的名字: <input type="text" onfocus="myFunction(this)" onblur="this.style.backgroundColor='red'">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

6、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

实例:

javascript 复制代码

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

7、onmouseenter 和 onmouseleave 事件

事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

over 和 enter的区别

如果元素没有子元素的时候，效果完全一样
如果元素包含子元素

当由父元素进入子元素的时候，over会继续触发

over实际上只要在跨越边界的时候，就会进行触发

onmousemove

鼠标移动

实例(包含了onmousemove onmouseenter. onmouseover)

javascript 复制代码

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;d
    text-align: center;
    background-color: lightgray;
}
p {
    background-color: white;
}
</style>
</head>
<body>
<h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3>
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>
<p> mouseenter 事件中有在鼠标指针进入 div 元素时触发。 </p>
<p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。</p>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p>
</div>
<div onmouseenter="myEnterFunction()">
  <p>onmouseenter: <br> <span id="demo2">鼠标移动到我这!</span></p>
</div>
<div onmouseover="myOverFunction()">
  <p>onmouseover: <br> <span id="demo3">鼠标移动到我这!</span></p>
</div>
<script>
x = 0;
y = 0;
z = 0;
function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}
function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x+=1;
}
function myOverFunction() {
    document.getElementById("demo3").innerHTML = y+=1;
}
</script>

8、onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

实例:

javascript 复制代码

<p onmousedown="this.innerHTML='mousedown'" onmouseup="this.innerHTML='out了'">点击</p>

javascript 复制代码

<h1 onclick="console.log(this)" onmousedown="console.log('over')" onmouseup="console.log('up')">点击文本!</h1>

9、事件对象 event(隐藏参数)

鼠标事件

screenX:鼠标位置相对于用户屏幕水平偏移量

screenY也就是垂直方向的

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角

clientY: 浏览器可视区域的y坐标不会随着滚动条的滚动而滚动

pageX：参照点也是浏览器内容区域的左上角

pageY: 浏览器内容区域的y坐标会随着滚动条的滚动而滚动

offsetX: 鼠标点击的元素位置距离元素左边界的x坐标

offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

例如:

javascript 复制代码

document.onmousedown= function(evt) {
       var e = evt ; 
       console.log(e.clientX + ',' + e.clientY); 
       console.log(e.screenX + ',' + e.screenY);
       console.log(e.pageX + "," + e.pageY);
};

10、键盘事件

onkeydown 键盘按住不放会一直触发任意键
onkeypress 键盘按住不放会一直触发字符键
onkeyup：当用户释放键盘上的某个键触发。

键码 : keyCode属性

所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量...的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应.

javascript 复制代码

document.onkeydown = function(evt) { 
    var e = evt ;
    console.log(e.keyCode);  //按任意键，得到相应的 keyCode 
    String.fromCharCode(e.keyCode) //获对应字符
};

注意: 大写字母或小写的编码相同, 都为大写字母。

字符编码: charCode属性

Firefox,Chrome和Safari的event对象支持charCode属性,只有按下字符键并且使用keypress事件时才会得到charCode,这个charCode的值和UniCode码对应,和keyCode也类似,但是charCode的字母区分大小写.(字符键:数字,字母(区分大小写),字符,空格,回车)

实例

javascript 复制代码

document.onkeypress =function(evt) { 
      var e= evt ;
      console.log(e.charCode);

}

注：可以使用String.fromCharCode()将 Unicode编码转换成实际的字符

11、HTML DOM EventListener 事件监听

可以对一个element绑定多个同样的事件且不会被覆盖

addEventListener() 方法

语法

element .addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

实例:

在用户点击按钮时触发监听事件：

javascript 复制代码

//使用函数名，来引用外部函数:
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
  document.getElementById("myBtn").addEventListener("click", displayDate);
  function displayDate() {
      document.getElementById("demo").innerHTML = Date();
  }
</script>
//直接添加函数体
element.addEventListener("click", function(){ alert("Hello World!"); });

//不使用事件监听的情况
window.onload = function(){ 
 var btn = document.getElementById("myBtn"); 
 btn.onclick = function(){ 
  alert("第一个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第二个事件"); 
 } 
 btn.onclick = function(){ 
  alert("第三个事件"); 
 } 
}
最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了

向同一个元素中添加多个事件句柄

注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
- 实例
  javascript 复制代码
```
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
```
  你可以向同个元素添加不同类型的事件：
- 实例
  javascript 复制代码
```
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
```
向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
- 实例
当用户重置窗口大小时添加事件监听：
javascript 复制代码
```
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = document.body.scrollWidth+''+document.body.scrollHeight;
});
```
传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

javascript 复制代码

<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将<p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event , function , useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

实例:

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
  document.getElementById("myP").addEventListener("click", function() {
      alert("你点击了 P 元素!");
  }, false);
  document.getElementById("myDiv").addEventListener("click", function() {
      alert(" 你点击了 DIV 元素 !");
  }, false);
  document.getElementById("myP2").addEventListener("click", function() {
      alert("你点击了 P2 元素!");
  }, true);
  document.getElementById("myDiv2").addEventListener("click", function() {
      alert("你点击了 DIV2 元素 !");
  }, true);
</script>
</body>
</html>

组织当标签嵌套时候的冒泡扩散

javascript 复制代码

   <script>
        onload = function () {
            var divOne = document.getElementById('div_one');
            var divTwo = document.getElementById('div_two');
            divOne.style.cssText = 'width:100%;height:400px;background-color:red;';
            divTwo.style.cssText = 'width:100%;height:200px;background-color:green;';
            divOne.addEventListener('click',function (evt) {
                console.log('红')
            })
            divTwo.addEventListener('click',function (evt) {
                console.log('绿')
                evt.stopPropagation();//阻止扩散
            })
        };
    </script>
</head>
<body>
<div id="div_one">
    <div id="div_two"></div>
</div>
</body>
</html>

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

实例

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
  	document.getElementById("demo").style.backgroundColor = 'rgb('+Math.floor(255*Math.random())+','+Math.floor(255*Math.random())+','+Math.floor(255*Math.random());
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>

12、HTML DOM 元素(节点)

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

创建节点

document.createElement('标签名')
创建文本节点

document.createTextNode("文本内容")
添加节点

节点名.appendChild("node")

或者

节点名.innerText = '文本的内容';
从父元素中删除子元素

parent.removeChild(child);

例如:

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

ul.removeChild(ul.lastElementChild);//删除节点

cloneNode() 方法

定义和用法

cloneNode() 方法创建节点的拷贝，并返回该副本。

cloneNode(true) 方法克隆所有属性以及它们的值。

如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

实例

javascript 复制代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<hr>
<ul>
</ul>
<script>
    var node = document.getElementsByTagName('ul')[0];
    var node1 = document.getElementsByTagName('ul')[1];
    var newLi = document.createElement('li')
    newLi.innerText = '新的'
    l = node.children.length;
    for(var i=0;i<l;i++){
        var x = node.children[i].cloneNode(true);
        node1.appendChild(x)
    }
</script>

element.replaceChild() 替换元素中的子节点

javascript 复制代码

document.getElementById("myList").replaceChild(newnode,oldnode);

实例

javascript 复制代码

document.getElementById("ul").replaceChild(document.getElementsByTagName('li')[1]
        ,document.getElementsByTagName('li')[0]);

获取父节点

node.parentNode
获取父类的第一个节点/最后一个

node.parentNode.firstChild 如果父类换行才是第一个子标签那么会是空白

node.parentNode.lastChild 获取最后一个节点
javascript 复制代码
```
firstChild//第一个HTML存在换行则会获取空白节点
lastChild//最后一个HTML存在换行则会获取空白节点
firstElementChild  
lastElementChild  
```
注意:因为第一个是空白节点原因是代码换行如果不换行第一个就是正常的标签
前一个同胞节点

previousSibling 如果前一个HTML存在换行则会获取空白节点

previousElementSibling 前一个兄弟节点是否换行不会造成影响

注释：如果没有 previousSibling 节点，则返回值是 null。
后一个同胞节点

nextElementSibling 后一个兄弟节点是否换行不会造成影响

获取所有子节点

node.children
返回元素的标签名。

element.tagName
从元素中移除指定属性

removeAttribute(name)
javascript 复制代码
```
console.log(document.getElementById("ul").removeAttribute('id'));
```

在指定的已有的子节点之前插入新节点。

element.insertBefore(新的节点,插入节点的位置)

javascript 复制代码

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表插入一个项目。</p>
<button onclick="myFunction()">试一下</button>
<script>
  function myFunction()
  {
  var newItem=document.createElement("LI")
  var textnode=document.createTextNode("Water")
  newItem.appendChild(textnode)

  var list=document.getElementById("myList")
  list.insertBefore(newItem,list.childNodes[0]);
  }
</script>

节点添加

实例

javascript 复制代码

<div id="div1">
  <p id="p1">这是一个段落。</p>
  <p id="p2">这是另一个段落。</p>
</div>
<script>
  var para=document.createElement("p");
  var node=document.createTextNode("这是一个新段落。");
  para.appendChild(node);
  var element=document.getElementById("div1");
  element.appendChild(para);
</script>