js Dom（三）节点、元素创建3种方式、为元素绑定多个事件addEventListener、attachEvent

目录：

1.节点的概念
    2.节点的属性(nodeType,nodeName,nodeValue)
    3.父节点(父元素)
    4.获取子节点或子元素
    5.获取节点、元素的方法（12行代码）
    6.案例：div标签里面的p标签背景高亮(使用子节点或子元素的方式)
    7.封装节点兼容代码
    8.案例：切换背景图片
    9.案例：全选、全不选
    10.元素创建的第一种方式  document.write("<p>文本</P>");
    11.元素创建的第二种方式 document.getElementById("divId").innerHTML="<p>新添加的文本</P>";
    12.案例：点击按钮，在div中加载一张图片
    13.案例：动态创建列表(元素创建的第二种方式)
    14.第三种元素创建方式  var pEle = document.createElement("p");
    15.案例：动态创建列表(使用第三种元素创建方式)
    16.动态创建表格(使用第三种元素创建方式)
    17.【操作元素的一些方法】
    18.点击按钮，创建元素(只创建一次)
    19.为元素绑定多个事件
    20.为元素绑定事件的兼容代码

1.节点的概念    <--返回目录
    * 文档：document
    * 元素：element,页面中所有的标签都是元素，标签--元素--对象
    * 节点：node，页面中所有的内容(标签、属性、文本)
    * 根元素：html这个标签

2.节点的属性(nodeType,nodeName,nodeValue)    <--返回目录
    * 节点的属性：可以通过标签(属性或文本).点出来
    * 节点类型nodeType:1--标签，2--属性，3--文本
    * 节点名称nodeName：标签节点--大写的标签名字，属性节点--小写的属性名字，文本节点--#text
    * 节点的值nodeValue:标签节点--null，属性节点--属性值，文本节点--文本内容

3.父节点(父元素)    <--返回目录
    * 只有标签可以作为父节点(父元素)
        - 获取所有的父节点   ele.parentNode;
        - 获取所有的父元素   ele.parentElement;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<div id="box">
    div里面的文本
    <p>p里面的文本</p>
</div>
<script type="text/javascript">
    var pEle = document.getElementById("box").getElementsByTagName("p")[0];
    console.log(pEle.parentNode);//[object HTMLDivElement]---说明父节点是标签
    console.log(pEle.parentElement);//[object HTMLDivElement]---说明父元素是标签

    var parentEle= pEle.parentNode;  //获取父标签
    console.log(parentEle.nodeType);  //1--标签类型
    console.log(parentEle.nodeName);  //DIV--标签名字
    console.log(parentEle.nodeValue);  //null--标签的值
</script>
</body>
</html>

4.获取子节点或子元素    <--返回目录
    * 获取所有的子节点  ele.childNodes;
    * 获取所有的子元素(子标签)  ele.children;

　　【获取子节点或子元素】

<div id="box">
    div里面的文本
    <p>p里面的文本</p>
    <a href=""></a>
</div>
<script type="text/javascript">
    var divEle = document.getElementById("box");
    console.log(divEle.childNodes);//子节点NodeList(5) [ #text, p, #text, a, #text ]
    console.log(divEle.children);//子元素HTMLCollection [ p, a ]
</script>

　　代码：【获取子节点】

<div id="box">
    div里面的文本
    <p>p里面的文本</p>
    <a href="">a标签里面的文本</a>
</div>
<script type="text/javascript">
    var divEle = document.getElementById("box");
    var _childNodes = divEle.childNodes;//子节点NodeList(5) [ #text, p, #text, a, #text ]
    for(var i=0;i<_childNodes.length;i++){
        console.log(_childNodes[i].nodeType+"---"+_childNodes[i].nodeName+"---"+_childNodes[i].nodeValue);
    }
</script>

　　结果：
        3---#text---div里面的文本
        1---P---null
        3---#text---
        1---A---null
        3---#text---

　　【根据属性名字获取属性节点】

<script type="text/javascript">
    var ele = document.getElementById("txt");
    var attNode = ele.getAttributeNode("name");
    console.log(attNode);//属性节点name="username"
    alert(attNode);//属性节点[object Attr]
    console.log(attNode.nodeType+"---"+attNode.nodeName+"---"+attNode.nodeValue);//2---name---username
</script>

5.获取节点、元素的方法（12行代码）    <--返回目录
    * 总结：凡是获取节点的代码在谷歌和火狐得到的都是节点，凡是获取元素的代码在谷歌和火狐总都是元素；
      除父(子)节点/元素，凡是获取节点的代码在IE8中得到的是元素，获取元素的代码不支持。

//父节点
ele.parentNode;
//父元素
ele.parentElement;
//子节点
ele.childNodes;
//子元素
ele.children;
//第一个子节点
ele.firstChild;
//第一个子元素
ele.firstElementChild
//最后一个子节点
ele.lastChild;
//最后一个子元素
ele.lastElementChild;
//某个元素的前一个兄弟节点
ele.previousSibling;
//某个元素的前一个兄弟元素
ele.previousElementSibling;
//某个元素的后一个兄弟节点
ele.nextSibling;
//某个元素的后一个兄弟元素
ele.nextElementSibling;

6.案例：div标签里面的p标签背景高亮(使用子节点或子元素的方式)    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="变色">
<div style="width:300px;border:2px solid blue">
    <span>这是span内的文本1</span>
    <p>这是p内的文本1</p>
    <span>这是span内的文本2</span>
    <p>这是p内的文本2</p>
</div>
<script type="text/javascript">
    var divEle = document.getElementsByTagName("div")[0];
    document.getElementsByTagName("input")[0].onclick=function(){
        var eles = divEle.children;//获取div标签里面所有的子标签
        //遍历所有的子标签，并判断是否是p标签
        for(var i=0;i<eles.length;i++){
            if(eles[i].nodeType===1 && eles[i].nodeName==="P"){
                eles[i].style.backgroundColor="red";
            }
        }
    };
</script>
</body>
</html>

7.封装节点兼容代码    <--返回目录
　　获取任意一个父元素的第一个子元素

function getfirstEleChild(ele){
    //if(typeof ele.firstElementChild != "undefined"){
    if(ele.firstElementChild){  //ele.firstElementChild有值就为true
        return ele.firstElementChild;
    }else{
        var node = ele.firstChild;
        while(node && node.nodeType !=1){
            node=node.nextSibling;
        }
        return node;
    }
}

　　获取任意一个父元素的最后一个子元素

function getlastEleChild(ele){
    if(ele.lastElementChild){  //ele.lastElementChild有值就为true
        return ele.lastElementChild;
    }else{
        var node = ele.lastChild;
        while(node && node.nodeType !=1){
            node=node.previousSibling;
        }
        return node;
    }
}

8.案例：切换背景图片    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        img{
            width:150px;
        }
        div{
            width: 700px;
            margin: 0 auto;
        }
        body {
            background:url("images/1.jpg");/*设置背景图片*/
        }
    </style>
</head>
<body>
<div id="box">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
</div>

<script type="text/javascript">
    var eles = document.getElementById("box").children;
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){
            console.log(this.src);//file:///C:/Users/oy/Desktop/images/2.jpg
            document.body.style.background="url("+this.src+")";
            console.log("url("+this.src+")");//url(file:///C:/Users/oy/Desktop/images/2.jpg)
        };
    }
</script>
</body>
</html>

9.案例：全选、全不选    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<table align="center" width="30%" cellspacing="0" border="1" bgcolor="#eee">
    <tr >
        <th><input type="checkbox" id="checkboxId"></th>
        <th>菜名</th>
        <th>饭店</th>
    </tr>
    <tbody>
        <tr align="center">
            <td><input type="checkbox" name=""></td>
            <td>aa</td>
            <td>aa</td>
        </tr >
        <tr align="center">
            <td><input type="checkbox" name=""></td>
            <td>aa</td>
            <td>aa</td>
        </tr>
        <tr align="center">
            <td><input type="checkbox" name=""></td>
            <td>aa</td>
            <td>aa</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    var checkboxEle = document.getElementById("checkboxId");
    var eles = document.getElementsByTagName("input");
    //为第一个checkbox注册点击事件
    checkboxEle.onclick=function(){
        //如果第一个checkbox选中，则全部选中; 否则，全部取消选中
        for(var i=0;i<eles.length;i++){
            eles[i].checked=this.checked;
        }
    };
    //为后面3个checkbox注册点击事件
    for(var j=1;j<eles.length;j++){
        eles[j].onclick=function(){
            //判断后面3个checkbox的状态，如果都被选中，则将第一个checkbox也选中
            var count=0;//计数器，用于保存选中的checkbox的个数
            for(var k=1;k<eles.length;k++){
                if(eles[k].checked){
                    count++;
                }
            }
            //如果计数器count=3，说明后面3个checkbox都被选中了，则将第一个checkbox也选中
            //如果计数器count<3，则将第一个checkbox去掉选中
            console.log(`count = ${count}`)
            if(count == 3){
                checkboxEle.checked=true;
            }else if(count<3){
                checkboxEle.checked=false;
            }
        };
    }
</script>
</body>
</html>

10.元素创建的第一种方式    <--返回目录
　　document.write("<p>文本</P>");
        - 如果是页面加载完毕后，通过该种方式创建元素，页面之前的所有内容被清空
        - 如果是页面加载的时候，通过该种方式创建元素，页面之前的所有内容被保留

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />

<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
    document.write("<p>文本</P>");//该句代码是在点击按钮后执行，此时页面已经加载完毕,页面之前的所有内容被清空
};
document.write("<p>文本</P>");//页面加载的时候，通过该种方式创建元素，页面之前的所有内容被保留
</script>
</body>
</html>

11.元素创建的第二种方式    <--返回目录
　　document.getElementById("divId").innerHTML="<p>新添加的文本</P>";

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 200px;border:2px solid pink">div原来的文本</div>

<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
    document.getElementById("divId").innerHTML="<p>新添加的文本</P>";//将原来的文本覆盖了
};
</script>
</body>
</html>

12.案例：点击按钮，在div中加载一张图片    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        img{
            width: 300px;
            height:300px;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width:300px; height:300px; border:2px solid pink">div原来的文本</div>

<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
    //点击按钮，在div中加载一张图片,加载的图片也会应用已经定义的样式
    document.getElementById("divId").innerHTML="<img src=‘a.jpg‘/>";
};
</script>
</body>
</html>

13.案例：动态创建列表(元素创建的第二种方式)    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
    var names = ["西施","杨玉环","貂蝉","王昭君"];
    var ele = document.getElementById("btn");
    ele.onclick=function(){
        var str = "<ul style=‘list-style-type:none;cursor:pointer‘>";
        for(var i=0;i<names.length;i++){
            str += "<li>"+names[i]+"</li>";
        }
        str += "</ul>";
        document.getElementById("divId").innerHTML=str;
    };
</script>
</body>
</html>

14.第三种元素创建方式    <--返回目录
　　var pEle = document.createElement("p");

<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var pEle = document.createElement("p");
        pEle.innerText="这是p标签里面的文本";
        document.getElementById("divId").appendChild(pEle);//在后面追加
    };
</script>

15.案例：动态创建列表(使用第三种元素创建方式)    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
    var names = ["a","b","c"];
    document.getElementById("btn").onclick=function(){
        var parent = document.getElementById("divId");
        var ulNode = document.createElement("ul");
        parent.appendChild(ulNode);

        for(var i=0;i<names.length;i++){
            var node = document.createElement("li");
            node.innerText=names[i];
            ulNode.appendChild(node);
            node.onmouseover = mouseoverHandler;
            node.onmouseout = mouseoutHandler;
        }
    };
    var mouseoverHandler = function (){
        this.style.backgroundColor = "#ccc";
    };
    var mouseoutHandler = function (){
        this.style.backgroundColor = "";
    };
</script>
</body>
</html>

16.动态创建表格(使用第三种元素创建方式)    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原来的文本</div>
<script type="text/javascript">
    var names = [
        {"name":"百度","href":"http://www.baidu.com"},
        {"name":"谷歌","href":"http://www.google.com"},
    ];
    document.getElementById("btn").onclick=function(){
        //创建table元素，并添加到div元素下
        var parent = document.getElementById("divId");
        var table = document.createElement("table");
        table.border = "1";

        parent.appendChild(table);
        for(var i=0;i<names.length;i++){
            var node = names[i];
            //创建tr元素，并添加到table元素下
            var tr = document.createElement("tr");
            table.appendChild(tr);
            //创建第一列，并添加到tr下
            var td = document.createElement("td");
            td.innerText = node.name;
            tr.appendChild(td);
            //创建第二列，并添加到tr下
            var td = document.createElement("td");
            td.innerHTML = "<a href="+node.href+">"+node.name+"</a>";
            tr.appendChild(td);
        }
    };
</script>
</body>
</html>

17.操作元素的一些方法    <--返回目录
    * parentEle.appendChild(node);//追加子元素
    * parentEle.insertBefore(newChild,refChild);//在指定的元素refEle之前插入newEle
      parentEle.insertBefore(newChild,parentEle.firstElementChild);//在div里面最前面插入newEle

* parentEle.replaceChild(newChild,refChild);//替换
    * parentEle.removeChild(parentEle.firstElementChild);//删除第一个子元素
    * 删除所有子元素
        while(parentEle.firstElementChild){
            parentEle.removeChild(parentEle.firstElementChild);//删除第一个子元素
        }

18.点击按钮，创建元素(只创建一次)    <--返回目录
    * 有则删除，无则创建，即创建之前先判断是否存在，存在删除，然后创建
    * 或者，创建之前先判断是否存在，存在就什么也不做，不存在就创建。

19.为元素绑定多个事件    <--返回目录
    * ele.addEventListener(type,listener,useCapture);//可以为同一个元素绑定多个相同的事件，谷歌火狐都支持，IE8不支持
        - 参数一：{string}type 事件的类型，没有on前缀
        - 参数二：{Function}listener 事件处理函数
        - 参数三：{boolean}useCapture 目前就写false，不解释

* ele.attachEvent("onclick",fn);谷歌火狐不支持，IE8支持

20.为元素绑定事件的兼容代码    <--返回目录
　　为任意元素，绑定任意的事件,事件处理函数

function addEventListener(ele,type,fn){
    //判断浏览器是否支持这个方法
    if(ele.addEventListener){
        ele.addEventListener(type,fn,false);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,fn);
    }else{
        ele["on"+type]=fn;
    }
}

---

原文地址：https://www.cnblogs.com/xy-ouyang/p/12185293.html

时间： 2024-10-02 04:24:33

js Dom（三）节点、元素创建3种方式、为元素绑定多个事件addEventListener、attachEvent的相关文章

WebDriver--定位元素的8种方式

WebDriver--定位元素的8种方式 在UI层面的自动化测试开发中,元素的定位与操作是基础,也是经常遇到的困难所在.webdriver提供了8种定位: id定位: find_element_by_id("id值"):id属性是唯一的 driver.find_element_by_id("loginName").clear()#用户名输入框的id属性 driver.find_element_by_id("loginName").send_key

获取页面元素的几种方式

在JS中我们可以通过以下几种方式获取到页面中的元素: 1.使用id来获取对象的元素(获取到的对象元素是唯一的) document.getElementById("") 例: <input type="text" value="默认的文字" id="txt"/><input type="button" value="按钮" id="btn"/>&

二维数组的认识及其表示元素的两种方式

/* ============================================================================ Name : TeatArr.c Author : lf Version : Copyright : Your copyright notice Description : 二维数组的认识以及其表示元素的两种方式 备注说明 1 要理解二维数组的存储方式. 2 实际上利用a[i][j]的方式并不"正统",这是这靠近我们的 常识一些

在Java中判断数组中包含某个元素的几种方式的比较

闲来无事,将java中判断数组中包含某个元素的几种方式的速度进行对比,直接上代码 talk is cheap, show you the code package test.contain.lishaojie; import java.util.Arrays;import java.util.HashSet;import java.util.Set; public class TestContain { /** * @param args */ public static void main(S

java的取出map里所有元素的两种方式

/* * 取出map元素的两种方式 */package com.map.test; import java.util.HashMap;import java.util.Iterator;import java.util.Map;import java.util.Set; public class Test1 { public static void main(String[] args) { // TODO 自动生成的方法存根 Map<Integer,String> mp=new HashMa

Struts2中访问web元素的四种方式

Struts2中访问web元素的四种方式如下: 通过ActionContext来访问Map类型的request.session.application对象. 通过实现RequestAware.SessionAware.ApplicationAware接口来访问Map类型的request.session.application对象(IoC方式). 通过ServletActionContext来访问Servlet API类型的HttpServletRequest. HttpSession. Serv

JavaScript创建元素的几种方式

/* * * 元素创建-----为了提高用户的体验 * 元素创建的三种方式: * 1. document.write("标签的代码及内容"); * 2. 对象.innerHTML="标签及代码"; * 3. document.createElement("标签的名字"); * * * * * * */ 原文地址:https://www.cnblogs.com/cuilichao/p/9382717.html

css1—八种方式实现元素垂直居中

这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变的,只要将“line-height”和“height”设置成一样的就可以了.这种方式局限性在于只有单行文本的元素才适用,多行元素是不适用的. html代码: <div class="vertical"> <span>aaa</span>content &

锁和多线程:线程创建3种方式(一)

线程 锁Synchronized 1.线程创建 2.线程安全 搞明白 线程 锁和多线程系列 1.线程创建 线程创建常见的三种方式: 继承Thread类 实现Runnable接口 实现Callable接口 第三种方式有异步调用效果,类似js中的ajax可以接收返回值,其余两种不能. package thread; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import