Javascript操作DOM的API及兼容性相关笔记（三）_document api的兼容性-优快云博客

本文链接：https://blog.youkuaiyun.com/jwlLWJ_2018/article/details/80803684

本文介绍了DOM操作的各种方法，包括元素的创建、遍历、属性获取与设置、隐藏及节点的增删替换等，并提供了IE678浏览器兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.数组的那些遍历方法forEach、map、filter、every、some，在IE678中不存在，dom对象的属性操作方法getAttribute、setAttribute、removeAttribute在IE678中也不存在，通过控制台打印的时候发现，返回的是一个Object类型的{}，也就是空对象。

◆js兼容性封装代码

/**
 * 功能：根据id获取元素节点
 * @param id
 * @returns {Element}
 */
function getelebyid( id ) {
    return document.getElementById(id);
}


//******************获取子元素节点*********开始********//
/**
 * 功能：获取第一个子元素节点
 * @param ele
 * @returns {Element|*|Node}
 */
function getfirstchild( ele ) {
    return ele.firstElementChild || ele.firstChild;
}

/**
 * 功能：获取最后一个子元素节点
 * @param ele
 * @returns {Element|*|Node}
 */
function getlastchild( ele ) {
    return ele.lastElementChild || ele.lastChild;
}

/**
 * 功能：获取对应索引值的子元素节点
 * @param ele
 * @param index
 * @returns {*|HTMLElement}
 */
function getchildofindex( ele, index ) {
    return ele.children[index];
}

/**
 * 功能：获取所有的子元素节点
 * @param ele
 * @returns {Array}
 */
function getallchild( ele ) {
    var newArr = [];
    var oldArr = ele.children;
    for (var i = 0; i < oldArr.length; i++) {
        if (oldArr[i].nodeType === 1) {
            newArr.push(oldArr[i]);
        }
    }
    return newArr;
}
//******************获取子元素节点*********结束********//


//******************获取兄弟元素节点*********开始********//
/**
 * 功能：获取上一个兄弟元素节点
 * @param ele
 * @returns {Element|*|Node}
 */
function getpresibling( ele ) {
    var pre = ele.previousElementSibling || ele.previousSibling;
    return pre;
}

/**
 * 功能：获取下一个兄弟元素节点
 * @param ele
 * @returns {Element|*|Node}
 */
function getnextsibling( ele ) {
    return ele.nextElementSibling || ele.nextSibling;
}

/**
 * 功能：获取对应索引值的兄弟元素节点
 * @param ele
 * @param index
 * @returns {*|HTMLElement}
 */
function getsiblingofindex( ele, index ) {
    return ele.parentNode.children[index];
}


/**
 * 功能：获取所有的兄弟元素节点（不包括自己）
 * @param ele
 * @returns {Array}
 */
function getallsibling( ele ) {
    var newArr = [];
    var oldArr = ele.parentNode.children;
    for (var i = 0; i < oldArr.length; i++) {
        if (oldArr[i] != ele) {
            newArr.push(oldArr[i]);
            //newArr[newArr.length]=oldArr[i];
        }
    }
    return newArr;
}
//******************获取兄弟元素节点*********结束********//

◆html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象的访问关系兼容性函数封装</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }


        ul {
            width: 200px;
            margin:70px 50px;
            overflow: hidden;
        }
        
        li {
            list-style:none;
            width: 100px;
            height: 100px;
            background-color: #0f0;
            margin:10px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li id="li3"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="1.对象的访问关系兼容性工具类(tools).js"></script>
    <script>
//        //获取当前节点
//        var box=document.getElementById("box");
//
//        //获取父节点
//        box.parentNode;
//
//        //获取上一个兄弟节点
//        box.previousSibling;
//        box.previousElementSibling;
//
//        //获取下一个兄弟节点
//        box.nextSibling;
//        box.nextElementSibling;
//
//        //获取第一个子节点
//        box.firstChild;
//        box.firstElementChild;
//
//        //获取最后一个子节点
//        box.lastChild;
//        box.lastElementChild;
//
//        //获取子节点
//        box.childNodes;
//        box.children;

        var li=getelebyid("li3");
        li.style.backgroundColor="#f00";

        getpresibling(li).style.backgroundColor="#00f";
        getnextsibling(li).style.backgroundColor="#ff0";

        var parent=li.parentNode;
        getfirstchild(parent).style.backgroundColor="#0ff";
        getlastchild(parent).style.backgroundColor="#f0f";

        var arr=getallsibling(li);
        arr.forEach(function(element,index,array){
            element.style.backgroundColor="#000";
        });

    </script>
</body>
</html>

2.dom元素创建的三种方式
◆使用document.write();这种方式会覆盖原来的页面的全部内容，慎用。
◆使用innerHTML属性，这种方式如果是持续添加的话，那么就使用+=，如果想覆盖原来的话，就直接=，绑定属性和内容比较方便。(节点套节点)。

◆使用document.createElement("li");这种方式是最纯正的，效率不高，因为还要添加到某个节点里面，但是创建的这个元素可以当作一个真正的页面元素来使用，定数量的时候一般用它。

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom元素创建的三种方式</title>
</head>
<body>
<button id="btn1">创建第一种创建元素的方式</button>
<button id="btn2">创建第二种创建元素的方式</button>
<button id="btn3">创建第三种创建元素的方式</button>
<ul id="ul01">

</ul>
<ul id="ul02">
<li id="li01">指定目标节点</li>
</ul>
<script>

        //第一种方式 document.write();这种方式会覆盖原来的页面的全部内容
        btn1.onclick=function(){
            document.write("<li>第一种创建元素的方式创建的元素</li>");
        }

        //第二种方式 innerHTML; innerText无法识别标签
        btn2.onclick=function(){
            ul01.innerHTML+="<li>第二种创建元素的方式创建的元素</li>";
        }

        //第三种方式 document.createElement();
        btn3.onclick=function(){
            var li=document.createElement("li");
            li.innerHTML="第三种创建元素的方式创建的元素";
            //把一个元素添加到一个元素内部的最下面
            ul02.appendChild(li);
            //把一个新元素添加指定节点的前面
            ul02.insertBefore(li,li01);

            console.log(li.innerText);
            console.log(li.textContent);
        }

</script>
</body>
</html>

3.通过dom对象的第一种获取属性的方式对象.属性名和对象["属性名"],只能够获取标签上的行内属性，例如对象.style并不能获取内嵌的<style type="text/css"></style>标签对中的css样式属性和外链的<link re="stylesheet" href="1.css"/>中的css样式属性，但可以获取页面标签中的行内css样式，页面标签行内css样式通过style属性来获取，对象.style也是一个对象，并不是一个字符串，如果要获取字符串的话，可以通过对象.style.cssText来获取css样式文本字符串，也能通过对象.style.cssText来设置css样式文本字符串的值，jquery中的css方法就是通过cssText来实现的，cssText其实就是页面标签的style属性的文本值，通过它可以快速的覆盖原来的行内样式，获取和设置对象.style中的样式属性使用的命名规则是驼峰命名法而不是css样式里的-横杠，比如css样式中line-height转换为页面标签对象的style对象的属性时是对象.style.lineHeight。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style属性的注意点</title>
    <style type="text/css">
        #box {
            border: 1px solid #000;
        }
        
    </style>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: #0f0;"></div>
<script>
    //1.对象的style属性也是一个对象
    var style=box.style;
    console.log(style);
    //2.style属性对象只能够获取行内的样式并不能获取内嵌和外链的样式
    console.log(style.backgroundColor);//如果有 则会输出属性值的字符串
    console.log(style.border);//如果是行内样式中没有的属性 则会返回空字符串
    //3.style属性对象里的成员使用的都是驼峰命名法，并并非是全小写加-横杠
    console.log(style.width);
    console.log(style.height);
    //4.如果想通过设置样式时一次性设置多个，可以使用style属性对象的cssText属性来设置，通过设置字符串的方式来设置css样式,和直接设置多个行内样式方式一样,每一次直接设置cssText都会覆盖掉原来标签设置style属性中的字符串。
    console.log(style.cssText);
    style.cssText="width:50px;height:50px;";


</script>
</body>
</html>

4.盒子隐藏的方式 display visibility opacity position
◆box.style.display="none";隐藏不占位置
◆box.style.visibility="hidden";隐藏占位置
◆box.style.opacity="0";和下面一组隐藏占位置box.style.filter="alpha(opacity=0)";只在IE678中有效

◆box.style.position="absolute";和下面一组隐藏不占位置，box.style.top="-9999px";

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各种隐藏盒子</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    box.onclick= function ( ) {
        box.style.display="none";//隐藏 不占位置

        box.style.visibility="hidden";//隐藏 占位置

        box.style.opacity="0";//和下面一组  隐藏占位置
        box.style.filter="alpha(opacity=0)";//只在IE678中有效

        box.style.position="absolute";//和下面一组 隐藏不占位置
        box.style.top="-9999px";
    }
</script>
</body>
</html>

5.元素的增加、删除、替换、克隆
◆增加：appendChild(newnode);追加新节点insertBefore(newnode,oldnode);把新节点插入到老节点之前
◆删除：removeChild(oldnode);移除老节点
◆替换：replaceChild(newnode,oldnode);使用新节点替换掉老节点

◆克隆：cloneNode();不完全克隆，cloneNode(true);完全克隆。

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的创建、增加、删除、替换、克隆</title>
</head>
<body>
<ul id="ul01">
    <li id="li01">我是指定目标节点li01</li>
    <li id="li02">我是指定目标节点li02</li>
    <li id="li03">我是指定目标节点li03</li>
    <li id="li04">我是指定目标节点li04</li>
</ul>
    <script>
        //元素的创建、增加、删除、替换、克隆

        //元素的创建三种方式
//1.        document.write("<li></li>") 不常用 会覆盖掉原来的内容
//2.        ul01.innerHTML="<li></li>"; 常用 当出现节点套节点的时候用这个特别方便的，绑定属性什么的也是很快的，直接书写html标签即可
//3.        document.createElement("li");常用，当指定节点数目时用这个很方便，但是节点套节点会有点麻烦，那个时候推荐是innerHTML

        //元素的增加
        var li=document.createElement("li");
        li.innerHTML="我是li";
        //追加
            //ul01.appendChild(li);

            //把li插入到li01中去
            //ul01.insertBefore(li,li01);

        //元素的删除  从ul01删除掉li01
            //ul01.removeChild(li01);

        //元素的替换  把ul01中的 li替换成li01
            //ul01.replaceChild(li,li01);

        //元素的克隆
            var cloneUl1= ul01.cloneNode();
            var cloneUl2= ul01.cloneNode(true);
            console.log(cloneUl1);//空壳的ul
            console.log(cloneUl2);//完整的ul

    </script>
</body>
</html>

6.如果移动子节点，不要使用正的for循环，因为父元素中的子节点的长度会随着移动而减少，所以需要使用反for循环。

◆选择水果移动到另一个篮子里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择水果后移动到另一个水果篮</title>
    <style type="text/css">
        select {
            width: 150px;
            height: 200px;
            background-color: #0f0;
        }
    </style>
</head>
<body>
<select name="" size="10" id="sle01" multiple>
    <option value="0">香蕉</option>
    <option value="1">橘子</option>
    <option value="2">苹果</option>
    <option value="3">鸭梨</option>
    <option value="4">海豚</option>
</select>
<button>>>></button>
<button><<<</button>
<button>></button>
<button><</button>
<select name="" size="10" id="sle02" multiple>
</select>
<script>
    //需求：当点击>>>按钮时 就把sle01中所有的option全部移动到sle02中,<<<也是类似， 当点击>是，就把sle01中选中的option全部移动到sle02中，<也是类似。
    //思路：点击>>>或者<<<时，获取所有的option，使用反循环添加选项，如果是><时，把当前选中的项 使用循环添加项
    //步骤：
    //1.获取事件源及相关元素
    //2.绑定事件
    //3.书写事件驱动程序


    //1.获取事件源及相关元素
    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];
    var btn3 = document.getElementsByTagName("button")[2];
    var btn4 = document.getElementsByTagName("button")[3];

    //2.绑定事件
    btn1.onclick = function () {//<<<
        //3.书写事件驱动程序

        var selects = sle01.children;
        //这个循环不行，因为元素数组的节点会减少 所以只能使用反循环
//        for(var i=0;i<selects.length;i++){
//            sle02.appendChild(selects[i]);
//        }
        for (var i = selects.length - 1; i >= 0; i--) {
            sle02.appendChild(selects[selects.length - 1 - i]);
        }
    }

    //>>>
    btn2.onclick = function () {
        //3.书写事件驱动程序
        //3.书写事件驱动程序

        var selects = sle02.children;
        //这个循环不行，因为元素数组的节点会减少 所以只能使用反循环
//        for(var i=0;i<selects.length;i++){
//            sle02.appendChild(selects[i]);
//        }
        for (var i = selects.length - 1; i >= 0; i--) {
            sle01.appendChild(selects[selects.length - 1 - i]);
        }
    }

    //>
    btn3.onclick = function () {
        moveSelectedNode(sle01, sle02);
    }

    //<
    btn4.onclick = function () {
        moveSelectedNode(sle02, sle01);
    }

    //选中所有项
    function selectAllNode( obj ) {
        var objchildrens = obj.children;
        for (var i = 0; i < objchildrens.length; i++) {
            objchildrens[i].selected = true;
        }
    }

    //移动选中后的项
    function moveSelectedNode( obj, toobj ) {
        var newArr = []
        var objchildrens = obj.children;
        for (var i = 0; i < objchildrens.length; i++) {
            if (objchildrens[i].selected) {
                newArr.push(objchildrens[i]);
            }
        }
        for (var j = 0; j < newArr.length; j++) {
            toobj.appendChild(newArr[j]);
        }
    }

</script>
</body>
</html>