js Dom节点元素创建3种方式为元素绑定多个事件addEventListenerattachEvent

Posted 木心

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js Dom节点元素创建3种方式为元素绑定多个事件addEventListenerattachEvent相关的知识，希望对你有一定的参考价值。

目录：

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

---

以上是关于js Dom节点元素创建3种方式为元素绑定多个事件addEventListenerattachEvent的主要内容，如果未能解决你的问题，请参考以下文章

Web API---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码

为HTML元素添加多个事件处理程序

JS---DOM---part4 课程介绍 & part3 复习

JS事件的三种方式

事件绑定的几种方式

DOM事件机制