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

以下是一些示例:

  1. 通过标签名选择元素:

    复制代码
    var element = document.querySelector("div");
  2. 通过类名选择元素:

    复制代码
    var element = document.querySelector(".my-class");
  3. 通过ID选择元素:

    复制代码
    var element = document.querySelector("#my-id");
  4. 通过属性选择元素:

    复制代码
    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=新的文本内容

注意:

  1. innerHTML是可以获取节点内 标签和内容
  2. innerText 只能获取节点内的文本内容
  3. innerHTML可以设置html和文本一起的内容 HTML标签会被浏览器所解析
  4. 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属性值

    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样式

  1. 设置cssText

    javascript 复制代码
    element.style.cssText = "样式1;样式2..."
    div.style.cssText = 'width:200px;height: 200px;background-color: red';
  2. 设置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')
  1. 通过add方法添加多个类名

    javascript 复制代码
    document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
  2. 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的区别

  1. 如果元素没有子元素的时候,效果完全一样

  2. 如果元素包含子元素

    当由父元素进入子元素的时候,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 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

  1. 创建节点

    document.createElement('标签名')

  2. 创建文本节点

    document.createTextNode("文本内容")

  3. 添加节点

    节点名.appendChild("node")

    或者

    节点名.innerText = '文本的内容';

  4. 从父元素中删除子元素

    parent.removeChild(child);

    例如:

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

    child.parentNode.removeChild(child);

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

  5. 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>
  6. element.replaceChild() 替换元素中的子节点

    javascript 复制代码
    document.getElementById("myList").replaceChild(newnode,oldnode);

    实例

    javascript 复制代码
    document.getElementById("ul").replaceChild(document.getElementsByTagName('li')[1]
            ,document.getElementsByTagName('li')[0]);
  7. 获取父节点

    node.parentNode

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

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

    node.parentNode.lastChild 获取最后一个节点

    javascript 复制代码
    firstChild//第一个HTML存在换行则会获取空白节点
    lastChild//最后一个HTML存在换行则会获取空白节点
    firstElementChild  
    lastElementChild  

    注意:因为第一个是空白节点 原因是 代码换行 如果不换行第一个就是正常的标签

  9. 前一个同胞节点

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

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

    注释:如果没有 previousSibling 节点,则返回值是 null。

  10. 后一个同胞节点

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

  1. 获取所有子节点

    node.children

  2. 返回元素的标签名。

    element.tagName

  3. 从元素中移除指定属性

    removeAttribute(name)

    javascript 复制代码
    console.log(document.getElementById("ul").removeAttribute('id'));
  4. 在指定的已有的子节点之前插入新节点。

    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>
相关推荐
灵智工坊LingzhiAI1 小时前
人体坐姿检测系统项目教程(YOLO11+PyTorch+可视化)
人工智能·pytorch·python
weixin_472339464 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击5 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue6 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762907 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
烛阴8 小时前
简单入门Python装饰器
前端·python
lzb_kkk8 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼9 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy