JavaScript BOM和DOM部分

已于 2022-12-03 15:02:29 修改
阅读量501 收藏
点赞数
文章标签： javascript
于 2022-11-23 23:20:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52781485/article/details/128009483
版权

目录

认识BOM

BOM定义

系统对话框涉及到的方法

open方法

history对象

location对象

location对象方法

认识DOM

DOM 

获取元素节点

自定义byClassName方法

获取当前有效样式

改变字体颜色和大小案例

attribute和元素节点属性

获取子节点

属性节点attributes

 DOM的节点操作

节点操作案例

this和快速找到当前点击按钮下标

this关键字

选项卡

offset系列方法

文档碎片

数组和对象的遍历方法

数组遍历：

对象遍历

认识BOM

BOM定义

BOM：  browser  object  model （浏览器规则）

Bom 就是浏览器的对象 【模型】，我们如何操控这个对象模型？

           

系统对话框涉及到的方法

window   方法        （一般情况下window可以省略）

alert();        弹出警告框

所有的属性和方法和变量前面都可以跟一个window

<script> 
       alert("hello");
        window.alert("world");

        function show(){
            alert("hello world");
        }
        window.show();//hello world
        show();    //hello world
    </script>

confirm( )     弹出一个待确定和取消的提示框

                      返回值：如果点击确定，返回true

                                    如果点击取消，返回false

    var res = confirm("你确定要离开么？");
        alert(res);

prompt( )      弹出一个带输入框的提示框

                      参数：

                                第一个参数：面板上显示的内容

                                第二个参数：输入框里面的默认（可以不传入）

                       返回值：点击确定，返回输入框的内容

                                     点击取消，返回null

     var res = prompt("请输入内容",100);
        alert(res);

open方法

  • 第一个参数：跳转的url( )        （可以打开多个相同的窗口）
  • 第二个参数：字符串，给打开的窗口起个名字  （再次打开窗口仍然为第一次打开的窗口）
  • 第三个参数：一串特殊含义的字符串，可以控制打开窗口的属性
<script>

        function btnClick(){
            //window.open();
            open("https://baidu.com","xxx",'width=400,height=400,top=200,left=200');
        }
</script>

<body>
    <button onclick = "btnClick()">打开窗口</button>
</body>

窗口特征（有些属性在浏览器中可能不兼容，火狐包容度最高）

channelmode = yes | no | 1 | 0

是否使用剧院模式显示窗口，默认为no

directories = yes | no | 1 | 0是否添加目录按钮。默认为yes
fullscreen = yes | no | 1 | 0是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口必须同时处于剧院模式
height = pixels窗口文档显示区域的高度，以像素计
left = pixels窗口的x坐标。以像素计
location = yes | no | 1 | 0是否显示地址字段。默认是yes
menubar = yes | no | 1 | 0是否显示菜单栏。默认是yes
resizable = yes | no | 1 | 0窗口是否可调节尺寸。默认是yes
scrollbars = yes | no | 1 | 0是否显示滚动条，默认是yes
status = yes | no | 1 | 0是否添加状态栏，默认是yes
titlebar = yes | no | 1 | 0是否显示标题栏。默认是yes
toolbar = yes | no | 1 | 0是否显示浏览器的工具栏。默认是yes
top = yes | no | 1 | 0

窗口的y坐标

width = pixels窗口的文档显示区的宽度。以像素计。

history对象

        window.history   掌管的是当前窗口（注意不是浏览器）历史记录（只要加载url不一样就会产生历史记录）

        属性：history.length  输出当前窗口历史记录的条数

        方法：

                        history.back( )        返回上一条历史记录

                        history.forward( )        前进到下一条历史记录

                        history.go( )       

                                           参数：    0             刷新当前页面

                                                       正整数       前进n条记录

                                                       负整数        后退n条记录

<body>
    <button onclick="alert(history.length)">获取历史记录的条数</button>
    <button onclick="history.back()">back</button>
    <button onclick="history.forward()">forward</button>
    <button onclick="history.go(2)">go</button>  <!-- 正数：往前跳n个页面；负数：往后跳n个页面；前提：页面存在 -->
</body>

location对象

url：统一资源定位符        协议：// IP(域名)  / :端口号 / 路径 /?查询字符串 #锚点

<script>
        /* url：统一资源定位符   
             
        协议：// IP(域名)  / :端口号 / 路径 /?查询字符串 #锚点 
        */

        /* 需要安装服务器才能显示
           location.protocol  file:本地磁盘文件访问
                              http:
                              https:(证书认证协议)
        */
        alert(location.protocol);   

       /* location.hostname  主机名  IP(在全球范围内找到你当前网络的地址)
                                    域名  IP的别称
       */
        alert(location.hostname);

        /* location.port    端口号(默认隐藏的)
           【注】是当前电脑中使用网络的软件，随机给他分配一个编号    0 ~ 65535
           hostname:port   可以直接定位到当前使用网络的程序
           小细节：浏览器   8080
                   http    80
                   https   443

            
            location.pathname  路径
            location.search    查询字符串(前后端交互)

            location.hash      锚点

         */
         alert(location.search);
         alert(location.hash);

    </script>

location对象方法

window.location === window.document.location;

location    地址栏(输入url的地方)

属性：

        方法：                     

                 location.assign(url)        【注】在当前窗口跳转带这个url

                 location.replace(url)       【注】在当前窗口替换成新的url

                 location.reload()             【注】刷新窗前窗口

                 location.reload(true)        不经过浏览器缓存强制从服务器重载

<body>
    <button onclick="location.assign('https://www.baidu.com')">assign</button> <!-- 单双引号交替使用;会有历史记录，可以前进和后退 -->
    <button onclick="location.replace('https://www.baidu.com')">replace</button><!-- 不产生历史记录，不可以后退 -->
    <button onclick="location.reload()">reload</button><!--  -->
</body>

认识DOM

DOM 

        document  object  model(文档对象模型)            

  • 节点类型：
    • 元素节点    <div></div>
    • 属性节点    id = " div1 "
    • 文本节点    div文本
  • 元素节点的获取
    • document.getElementById(id)
      • 功能：通过id获取符合元件的元素. (id必须是唯一的)
      • 返回值：就是符合条件的一个节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script>
        var oDiv = document.getElementById("div1");
        alert(oDiv);    //null；原因：代码是按顺序执行
    </script> -->
    <!-- <script>
        //解决方案二
        window.onload = function(){
         //写在这里的代码，是整个页面加载完成以后执行
         var oDiv = document.getElementById("div1");
        alert(oDiv);  //[object HTMLDivElement]
        }
    </script> -->
    <script>
        window.onload = function(){
         var oDiv = document.getElementById("div1");
         /* 获取行间属性的值 */
            alert(oDiv.id);     //div1
            alert(oDiv.title); //hello
            /* 不能直接.class；原因是其为一个关键字
                访问行间class  通过className访问
            */
            alert(oDiv.className);  //box

         /* 设置行间属性的值,在网页内检查代码框可以看见被修改 */
            oDiv.id = "div2";
            oDiv.title = "world";
            oDiv.className = "box4";

            /* 想要获取行间属性的样式 */
            alert(oDiv.style);          //[object CSSStyleDeclaration]
            alert(oDiv.style.width);    //300px
            alert(oDiv.style.height);   //300px
            /* 如果css样式带‘-’，将‘-’去掉，从第二个单词开始首字母大写 */
            alert(oDiv.style.backgroundColor);      //red

        /* 修改宽高和背景颜色 */   
            oDiv.style.backgroundColor = "blue";
        }
    </script>
</head>
<body>
    <!-- 行间样式写在标签内的通过Js中的获取行间样式属性方法可以访问到，但如果将样式写在css中，用该方法不能获取属性值 -->
    <div id="div1" title="hello" class="box" style="width: 300px; height: 300px; background-color: red;">div文本</div>
</body>
<!-- 解决方案一：放在boay下面
<script>
    var oDiv = document.getElementById("div1");
    alert(oDiv);  //[object HTMLDivElement]
</script> -->
</html>

获取元素节点

  • node.getElementsByTagName(标签名)；
    • 功能：从node节点开始，通过标签名获取符合条件的元素节点
  • node.getElementsByClassName(class名字)    IE8以下不兼容
    • 功能：通过class名字获取符合条件的元素节点
  • document.getElemrntsByName(name属性的值，只能在全局查找)
    • 功能：通过name属性的值获取符合条件的元素节点
    • 【注】一般使用在表单元素里
  • 【注】node可以是任意节点，想要获取全局，使用document，document代表整个页面所有标签，但返回的都是伪数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       window.onload = function(){
            var aLis1 = document.getElementsByTagName("li");
            // alert(aLis1); //[object HTMLCollection],返回的是个对象，使用起来和数组类似，一般情况，把这种叫做伪数组/类数组(人为命名，官方没有这种概念).
            alert(aLis1.length); //10
       } 
        window.onload = function(){
           var oOl = document.getElementById("ol1");
           var aLis2 = oOl.getElementsByTagName("li");
          //获取ol下的li节点
          alert(aLis2.length);   //4
          for(var i = 0; i < aLis2.length; i++){
              aLis2[i].style.backgroundColor = "red";
          }


          var nodes1 = document.getElementsByClassName("box");
          alert(nodes1.length);  //5
          for(var i = 0; i < nodes1.length; i++){
              nodes1[i].style.backgroundColor = "red";
          }


          var oUl = document.getElementById("ul1");
          var nodes2 = oUl.getElementsByClassName("box");
          alert(nodes2.length);  //3
          for(var i = 0; i < nodes2.length; i++){
              nodes2[i].style.backgroundColor = "red";
          } 


          var nodes3 = document.getElementsByName("hello");
          alert(nodes3.length);   //3
          for(var i = 0; i < nodes3.length; i++){
              nodes3[i].style.backgroundColor = "red";
          }
        } 
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li name="hello">111</li>
        <div class="box" name="hello">div</div>
    </ul>
    <input type="text" name="hello"/>
    <span name="hello">span</span>
    <ol id="ol1">
        <li>222</li>
        <li class="box">222</li>
        <li class="box">222</li>
        <li>222</li>
    </ol>
</body>
</html>

  • document.querySelector( )
    • 返回值：一个元素节点，找到符合条件的第一个元素节点

  • document.querySelectorAll( )
    • 返回值：返回值是一个伪数组
    • 参数：字符串     CSS选择器格式字符串
<script>
        window.onload = function(){
            /* document.querySelector：符合条件的第一个节点 */
            //id = ol1
            var node = document.querySelector("#ol1"); //调用格式使用css格式
            node.style.backgroundColor = "red";

            //tagName = "li"
            var node1 = document.querySelector("li");   //第一个元素节点
            node1.style.backgroundColor = "yellow";

            //class = box
            var node2 = document.querySelector(".box"); //调用格式使用css格式
            node2.style.backgroundColor = "purple";

            //获取ol下第一个 class = box
            var node3 = document.querySelector("ol .box"); //调用格式使用css格式,注意空格
            node3.style.backgroundColor = "black";

            //name = hello
            var node4 = document.querySelector("[name = hello]"); //调用格式使用css格式
            node4.style.backgroundColor = "pink";

            /* document.querySelectorAll：符合条件的所有节点 */
            // var nodes = document.querySelectorAll("ol .box");    //返回的是伪数组
            // alert(nodes.length);
            // for(var i = 0; i < nodes.length; i++){
            //     nodes[i].style.backgroundColor = "blue";
            // }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li name="hello">111</li>
        <div class="box" name="hello">div</div>
    </ul>
    <input type="text" name="hello"/>
    <span name="hello">span</span>
    <ol id="ol1">
        <li>222</li>
        <li class="box">222</li>
        <li class="box">222</li>
        <li>222</li>
    </ol>
</body>

自定义byClassName方法

<script>
        /* 
            node.getElementsByClassName();
         */
         function elementsByClassName(node,classStr){
             //1、获取node这个节点下所有的子节点
             var nodes = node.getElementsByTagName("*");
             var arr = [];  //存放符合条件的节点
             for(var i = 0; i < nodes.length; i++){
                 if(nodes[i].className === classStr){
                     arr.push(nodes[i]);
                 }
                return arr;
             }

             window.onload = function(){
                 var oL = document.getElementById("ol1");
                 var nodes = elementsByClassName(oL,"box");
                 alert(nodes.length);
                 for(var i = 0; i < nodes.length; i++){
                     nodes[i].style.backgroundColor = "red";
                 }
             }
            
         }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li name="hello">111</li>
        <div class="box" name="hello">div</div>
    </ul>
    <input type="text" name="hello"/>
    <span name="hello">span</span>
    <ol id="ol1">
        <li>222</li>
        <li class="box">222</li>
        <li class="box">222</li>
        <li>222</li>
    </ol>
</body>

获取当前有效样式

<script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            /* 
                通过 .style.xxx的方式只能访问内联的css样式。
                权重最高的css样式才能生效
            */
            // alert(oDiv.style.width);            //200px
            // alert(oDiv.style.backgroundColor);  //red
            // alert(oDiv.style.height);           //无输出

            /* 
                获取当前的有效样式：
                    系统提供了两个方法(不同浏览器)：
            */
            // alert(oDiv.currentStyle['height']);     //IE兼容
            // alert(getComputedStyle(oDiv)["height"]);    //300px，火狐、谷歌兼容

            // alert(getStyle(oDiv,"height"));   //300px

            /* 
                设置样式
                  .style.xxx方式设置css样式
            */
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function(){
                oDiv.style.backgroundColor = "orange";
                oDiv.style.height = "500px";
            }
        }
        //跨浏览器的兼容
        function getStyle(node,cssStyle){
            return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
        }
    </script>
</head>
<body>
    <div id="div1" style="width: 200px; background-color: red;" class="box"></div>
    <button id="btn1">修改样式</button>
</body>

改变字体颜色和大小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 400px; height: 200px; background-color: white; border: 1px solid black; margin: 100px auto; text-align: center; line-height: 200px; font-size: 18px;}
    </style>
    <script>
        //跨浏览器的兼容
        function getStyle(node,cssStyle){
            return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
        }
        /* 
            写一个定时器，每一秒修改一次div文本颜色和文字大小，
            最开始这个文字是默认大小，大小开始增大，当增大了6次以后，
            文字大小开始缩小，缩小6次，文字再开始增大。
        */
       /* 
        颜色随机：
            rgba(255，255，255，0);

            parseInt(Math.random() * 256)
       */

       function randomColor(){
           var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
           return str;
       }
    //    alert(randomColor());

        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var speed = 5;  //每一次变化的大小
            var count = 0;  //计数
            setInterval(function(){
                oDiv.style.color = randomColor();

                //1、将字体上一次的字体大小取出
                var iCur = parseInt(getStyle(oDiv,'fontSize'));
                // alert(iCur);

                //2、变化字体大小，重新赋值回去
                oDiv.style.fontSize = (iCur + speed) + "px";

                count++;
                if(count % 6 == 0){
                    speed *= -1;
                }
            }, 1000);
        }
    </script>
</head>
<body>
    <div id="div1">
        div文本
    </div>
</body>
</html>

attribute和元素节点属性

setAttribute

getAttribute

removeAttribute

window.onload = function(){
            var oDiv = document.getElementById("div1");

            alert(oDiv.id); //div1
            alert(oDiv.title);  //hello
            alert(oDiv.name);   //undefined

            /* 
            区别：
                1、class的访问
                2、支持自定义属性
                3、
            */
            alert(oDiv.getAttribute("id")); //div1
            alert(oDiv.getAttribute("title"));  //hello

            alert(oDiv.className);  //box
            alert(oDiv.getAttribute("class"));  //box

            alert(oDiv.xxx);   //undefined
            alert(oDiv.getAttribute("xxx"));   //yyy

            oDiv.className = 'box4';
            oDiv.zzz = 'ooo';   //添加成功，但行间显示不了
            alert(oDiv.zzz);    //000

            oDiv.setAttribute("class",'box5');
            oDiv.setAttribute("zzz",'ooo');

            oDiv.className = '';    //只是用空字符串替换了
            oDiv.removeAttribute("title");  //真正的删除

        }

 

innerHTML     获取标签间内容  会解析标签

innerText        获取标签间纯文本   不会解析标签，设置纯文本

outerHTML        从外标签开始到外标签结束    会解析标签

   <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            alert(oDiv.innerHTML);

            //赋值
            oDiv.innerHTML = "<h1>hello world</h1>";  /* 解析标签间的内容 */

            alert(oDiv.innerText);  //div文本em文本strong文本

            alert(oDiv.outerHTML);  //<div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>

            oDiv.outerHTML = "<h1>hello world </h1>";

        }
    </script>
<body>
    <div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>
</body>

获取子节点

childNodes        访问当前节点下所有的子节点

firstChild            访问子节点中的首位

lastChild             访问子节点中的最后一位

nextSibling         访问当前节点兄弟节点中的下一个节点

previousSibling        访问当前节点兄弟节点中的上一个节点

【注】上述这些属性都包含文本节点

【注】上下方法功能一致，但下述方法只获取子节点中的元素节点（IE8以下不兼容）

children        

firstElementChild

lastElementChild

nextElementSibling

previousElementSibling

               nodeType            nodeName            nodeValue
元素节点        1                      标签名                    null
属性节点        2                      属性名                  属性值
文本节点        3                      #text                   文本内容

        /* 
                nodeType            nodeName            nodeValue
        元素节点   1                 标签名               null
        属性节点   2                 属性名               属性值
        文本节点   3                 #text               文本内容
        */
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            alert(oDiv.childNodes.length);  //3
            alert(oDiv.childNodes[0]);  //[object HTMLElement]
            alert(oDiv.childNodes[1]);  //[object Text]; 文本节点  文本节点通过元素节点的子节点获取
            alert(oDiv.childNodes[2]);  //[object HTMLElement]

            alert(oDiv.childNodes[0].nodeType); //1 元素节点
            alert(oDiv.childNodes[1].nodeType); //3 文本节点
            alert(oDiv.childNodes[2].nodeType); //1 元素节点

            alert(oDiv.childNodes[0].nodeName); //EM
            alert(oDiv.childNodes[1].nodeValue);//div文本
            alert(oDiv.childNodes[2].nodeValue);//null

            alert(oDiv.firstChild.nodeName); //EM
            alert(oDiv.lastChild.nodeName); //STRONG    
        }

空格、回车、换行        看不见，但是字符

<script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            alert(oDiv.childNodes.length);  //5
            for(var i = 0; i < oDiv.childNodes.length; i++){
                alert(oDiv.childNodes[i].nodeType);//3,1,3,1,3
            }
        }
</script>
<body>
    <div id="div1">
        <em>em文本</em>
        div文本
        <strong>strong文本</strong>
    </div>
</body>
<script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            alert(oDiv.childNodes.length);  //5
            for(var i = 0; i < oDiv.childNodes.length; i++){
                alert(oDiv.childNodes[i].nodeType);//3,1,3,1,3
            }

            alert(oDiv.children.length);//2
            alert(oDiv.firstElementChild.nodeName);//EM
            alert(oDiv.lastElementChild.nodeName);//STRONG

            alert(oDiv.firstElementChild.nextSibling.nodeValue);//div文本
            alert(oDiv.firstElementChild.nextElementSibling.nodeName);//STRONG
            
        }
    </script>
<body>
    <div id="div1">
        <em>em文本</em>
        div文本
        <strong>strong文本</strong>
    </div>
</body>

属性节点attributes

        attributes：获取当前元素节点上的所有的属性的节点

<script>
        /* 
            集合：
                1、无序
                2、不重复
        */
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            // alert(oDiv.attributes);//[object NamedNodeMap] 属性节点集合对象
            
            //获取其中的某一个属性节点
            //title = hello
            alert(oDiv.attributes.getNamedItem("title"));   //[object Attr]
            alert(oDiv.attributes.getNamedItem("title").nodeName);//title
            alert(oDiv.attributes.getNamedItem("title").nodeType);//2
            alert(oDiv.attributes.getNamedItem("title").nodeValue);//hello

            /* 简化版 */
            alert(oDiv.attributes["title"].nodeName);
            alert(oDiv.attributes["title"].nodeType);
            alert(oDiv.attributes["title"].nodeValue);
        }
    </script>
<body>
    <div id="div1" title="hello" class="box">div文本</div>
</body>

 DOM的节点操作

  • document.write( )        会覆盖页面原有内容
<script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function(){
                document.write("<h1>hello world</h1>");
            }
        }
    </script>
<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

 

  • creatElement( )

        格式：document.creatElement( )

        参数：标签名

        返回值：创建好的这个节点

  • appendChild( )

        格式：node1.appendChild(node2);

        功能：将node2节点插入到node1节点子节点的末尾

<script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                var oP = document.createElement("p");
                oDiv.appendChild(oP);
            }
        }
    </script>
<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

  •  creatTextNode( )

        格式：document.creatTextNode(文本)；

        功能：创建文本节点（纯文本）

<script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                var oP = document.createElement("p");
                var oTxt = document.createTextNode("<h1>hello world</h1>");

                oP.appendChild(oTxt);
                oDiv.appendChild(oP);
            }
        }
    </script>

<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

 

 

  •  insertBefore( )

         格式：box1.parentNode.insertBefore(box2,box1);

        功能：将box2添加到box1的前面

<script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                var oP = document.createElement("p");
                var oTxt = document.createTextNode("<h1>hello world</h1>");

                oP.appendChild(oTxt);

                //将oP节点插入到oDiv节点的前面
                document.body.insertBefore(oP,oDiv);
            }
        }
    </script>

<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

  

  

  •  replaceChild( )

         格式：box1.parentNode.replaceChild(box2,box1);

        功能：用box2节点将box1节点替换掉

<script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                var oP = document.createElement("p");
                var oTxt = document.createTextNode("<h1>hello world</h1>");

                oP.appendChild(oTxt);

                //用oP节点，将oDiv节点替换掉
                document.body.replaceChild(oP,oDiv);
            }
        }
    </script>

<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

  • cloneNode( )

         格式1：node.cloneNode( );  【注】标签内的嵌套标签没有被克隆

         格式2：node.cloneNode(true); 克隆节点本身和子节点

         返回值：克隆出来的新节点

 格式1：

    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                var newNode = oDiv.cloneNode();
                document.body.appendChild(newNode,oDiv);
            }
        }
    </script>

<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

 

格式2：

 <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                var newNode = oDiv.cloneNode(true);
                document.body.appendChild(newNode,oDiv);
            }
        }
    </script>

<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

 

  • removeChild( )

         格式：box.parentNode.removeChild( box );

        功能：将box节点从页面上删除

<script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                //删除div节点
                document.body.removeChild(oDiv);
            }
        }
    </script>
<body>
    <div id="div1">
        <em>em</em>
        div文本
        <strong>strong</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>

节点操作案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 400px; height: 100px; background-color: orange;}
        #div2{width: 400px; height: 500px; background-color: peachpuff;}
        #input1{width: 300px; height: 30px; font-size: 18px; margin: 5px 10px;}
        #div1 button{width: 100px; height: 30px; font-size: 18px; background-color: black; color: white; margin: 15px 10px;}
        #div2 div{border-bottom: 1px dashed gray; padding: 2px; position: relative;}
        #div2 div button{position: absolute; right: 0px;}
    </style>
    <script src="tool.js"></script>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var oDiv2 = document.getElementById("div2");
            var oInput = document.getElementById("input1");

            //获取div1下面所有的button
            var aBtns = oDiv1.getElementsByTagName("button");

            //分别给三个按钮添加不同的点击函数
            aBtns[0].onclick = function(){
                if(!oInput.value){
                    alert("输入的内容不得为空");
                }else{
                    //获取到输入框的内容，创建节点添加到页面上
                    var newDiv = document.createElement("div");
                    var oTxt = document.createTextNode(oInput.value);
                    newDiv.appendChild(oTxt);
                    newDiv.style.backgroundColor = randomColor();

                    oDiv2.appendChild(newDiv);
                    oInput.value = '';
                }
            }

            aBtns[1].onclick = function(){
                //删除最后一个节点
                oDiv2.removeChild(oDiv2.lastChild);
            }

            aBtns[2].onclick = function(){
                //拷贝最后一个节点，再添加到页面上
                var newNode = oDiv2.lastChild.cloneNode(true);
                oDiv2.appendChild(newNode);
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <input type="text" id="input1" placeholder="输入内容"> <br/>
        <button>增加</button>
        <button>删除</button>
        <button>拷贝</button>
    </div>
    <div id="div2">
        <!-- <div>xxx <button>x</button> </div>
        <div>xxx <button>x</button> </div>
        <div>xxx <button>x</button> </div> -->
    </div>
</body>
</html>

this和快速找到当前点击按钮下标

<script>
         window.onload = function(){
             var aBtns = document.getElementsByTagName("button");
             for(var i = 0; i < aBtns.length; i++){
                 aBtns[i].onclick = function(){
                     alert(i);  //点击每一个按钮，弹出来的i的值都为3；原因：代码先执行结束，才有你的点击事件，此时i的值已经被赋为3了，所以不论点击哪一个按钮，i的值都是3
                 }
             }
             alert("循环结束，i = " + i);
         }
    </script>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>

this关键字

        概念：只要封装函数，任何一个函数系统都会内置一个叫做 this的变量

                   this变量存储的是地址，是当前函数主任的地址。

【注】this永远指向当前函数的主人。函数的主任要通过当前上下文判断

this类似于现实生活中，用到的“我”。

<script>
        var person = {
            username:"钢铁侠",
            sex:"男",
            show: function(){
                alert(person.username); //钢铁侠
                alert(this.username);   //钢铁侠
            }
        };

        //给对象添加方法
        person.xxx = function(){
            
        }

        // person.show();

        //全局函数下，没有主人，默认为window
        function show(){
            alert(this);
        }
        // show(); //[object Window]
        // window.show();//[object Window]

        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function(){
                alert(this);
            }
        }

    </script>

<body>
    <button id="btn1">按钮</button>
</body>

修改版快速找到按钮下标：

<script>
         window.onload = function(){
             var aBtns = document.getElementsByTagName("button");
             for(var i = 0; i < aBtns.length; i++){
                 //给每一个按钮添加一个自定义属性
                 aBtns[i].index = i;
                 aBtns[i].onclick = function(){
                   alert(this.index);  
                }
             }
             alert("循环结束，i = " + i);
         }
    </script>

<body>
    <button>按钮1</button>
    <!-- index = 0  onclick = func -->
    <button>按钮2</button>
    <!-- index = 1  onclick = func -->
    <button>按钮3</button>
    <!-- index = 2  onclick = func -->
</body>

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 button{width: 100px; height: 30px; background-color: gray; color: white; font-size: 18px;}
        #div1 .active{background-color: orange; color: blue;}
        #div1 div{width: 340px; height: 300px; border: 1px solid black; display: none;}
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var aBtns = oDiv1.getElementsByTagName("button");
            var aDivs = oDiv1.getElementsByTagName("div");

            //给每一个按钮添加点击
            for(var i = 0; i < aBtns.length; i++){
                aBtns[i].index = i;
                aBtns[i].onclick = function(){
                    //取消所有按钮的样式（不知道去前一个显示样式的按钮是哪一个按钮）
                    for(var j = 0; j < aBtns.length; j++){
                        aBtns[j].className = '';
                        aDivs[j].style.display = 'none';
                    }
                    aDivs[this.index].style.display = 'block';
                    this.className = 'active';
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <button class="active">HTML5</button>
        <button>Python</button>
        <button>Java</button>
        <div style="display: block;">HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的。在浏览器中通过一些技术处理将其转换成了课识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员再开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性网站开发技术人员是必须要有所了解的。</div>
        <div>Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</div>
        <div>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念。因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好的实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</div>
        
    </div>
</body>
</html>

offset系列方法

  • offsetWidth、offsetHeight
<style>
        #div1{width: 100px; height: 100px; background-color: red; border: 1px solid black; padding: 8px; margin: 20px;}
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            // alert(getStyle(oDiv1,"width")); //width这个属性的值 100px
            
            alert(oDiv1.offsetWidth);//直接拿到的数字，没有px；会受border和padding的影响，但与margin无关
        }

        /* 跨浏览器兼容 */
        function getStyle(node,cssStyle){
            return node.currentStyle ? node.currentStyle : getComputedStyle(node)[cssStyle];
        }
    </script>
<body>
    <div id="div1"></div>
</body>

  • offsetLeft、offsetTop：计算眼睛能看到的实际距离第一个有定位的父节点的距离
<style>
        *{margin: 0px; padding: 0px;}
        #div1{margin: 30px; width: 200px; height: 200px; background-color: orange; position: relative;}
        #div2{margin: 20px; width: 100px; height: 100px; background-color: gray;}
    </style>
    <script>
        /* 跨浏览器兼容 */
        function getStyle(node,cssStyle){
            return node.currentStyle ? node.currentStyle : getComputedStyle(node)[cssStyle];
        }

        window.onload = function(){
            var oDiv2 = document.getElementById("div2");
            // alert(getStyle(oDiv2,"left"));//auto

            // alert(oDiv2.offsetLeft);//50,没给div1设置position时
            alert(oDiv2.offsetLeft);//20
        }
    </script>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

文档碎片

 /* 创建10w个检点，添加到页面上 */
        window.onload = function(){
            console.time("test1");
            //test1: 60.427978515625 ms
            for(var i = 0; i < 100000; i++){
                var newDiv = document.createElement("div");
                document.body.appendChild(newDiv);
            }
            console.timeEnd("test1");

            /* 先创建好10w个节点，将10W个节点插入到一个节点上，最后将这1个节点添加到页面上 */

            //test2: 53.89404296875 ms    文档碎片操作
            console.time("test2");
            var node = document.createElement("div");
            for(var i = 0; i < 100000; i++){
                var newDiv = document.createElement("div");
                node.appendChild(newDiv);
            }
            document.body.appendChild(node);
            console.timeEnd("test2");
        }

数组和对象的遍历方法

数组遍历：

        for循环

        for...in

        forEach

        var arr = [10, 20, 30, 40,50];
        for(var i = 0; i < arr.length; i++){
            document.write("for," + i + "," + arr[i] + "<br/>");
        }

        for(var i in arr){
            document.write("forin," + i + "," + arr[i] + "<br/>");
        }

        arr.forEach(function(item, index, arr){
            document.write("forEach," + index + "," + item + "<br/>");
        });

对象遍历

        for...in

        var person = {
            username:"钢铁侠",
            age: 18,
            sex: "男"
        };

        for(var i in person){
            //i   是当前遍历到的属性
            document.write("对象遍历：" + i + "," + person[i] + "<br/>");
        }

好的船长�
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中el表达式遍历list,EL表达式在JS中取出来打印[object HTMLDivElement]的问题
weixin_34082213的博客
06-11 1518
今天做项目的时候,要在JS中获取请求参数中的 值,想直接用 ${param.tabName}获取,结果console.debug()打印出来,居然是 [object HTMLDivElement] 类型. 导致无法获取真正的值,原因可能是因为JQ默认把 这个值进行了封装,封装成HTMLDivElement 对象,导致出问题. 解决办法,就是告诉JQ,这是一个字符串,不是对象,把var k =...
[object HTMLDivElement] 创建dom报与 innerHTML appendChild使用
qq_28134589的博客
09-30 1209
在创建DOM , 插入DOM报错，其实是一种错误的写法 。 错误演示 var a = document.createElement('div') //**创建DOM*// a.innerText = '123' // document.body.appendChild(a) //正常使用不报错 document.body.innerHTML= a //错误使用报错 页面显示 [object HTMLDivElement] 正确使用 innerHTML 插入的是
WangEdtior富文本编辑器
最新发布
pscool的博客
04-08 916
WangEdtior官网，提供了vue2、vue3的安装方式>> vue2 安装wangEditor ArticleWang.vue
在antd项目中使用wangEditor经验
m0_47670683的博客
03-08 3727
我最近在前端项目中要用到富文本编辑器，找来找去发现wangEditor很不错，目前已经迭代到v5版本，WangEditor官方手册是纯中文文档，内容比较详细，非常值得推荐使用。 我使用react开发，但官方手册对react开发者写的手册不够详尽，在使用过程中还是折腾了不少时间，其中多次提交issue叨唠开发者，项目开发者王福朋都不厌其烦地帮我解决了，非常感谢。在此我写一篇在antd中使用wangEditro开发手册致敬王福朋先生，支持开源项目。 安装 yarn add @wangeditor/editor-
wangEditor富文本编辑器自定义菜单（工具栏）
热门推荐
种麦南山下的博客
05-09 1万+
如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。 可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置。 const toolbarConfig: Partial<IToolbarConfig> = { excludeKeys: [ 'headerSelect', 'italic', 'group-more-style' // 排除菜单组，写菜单组 key 的值即可
解决jQuery each循环dom元素报错 [object HTML DivElement]
落子無悔
08-30 1301
jQuery each循环dom元素报错  [object HTML InputElement]  我们先来看下错误 输出到浏览器页面是[object HTML InputElement] ，但是console 控制台输出是没问题           这是报错的代码片段 var list_s = document.getElementsByName("summar...
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
实现JavaScript的组成----BOM和DOM详解
10-22
下面小编就为大家带来一篇实现JavaScript的组成----BOM和DOM详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
网页弹出[Object HTMLDivElement]，怎么取值？
weixin_30340745的博客
01-21 6911
使用innerHTML方法，可以得到文本值 转载于:https://www.cnblogs.com/yang-xiansen/p/10298737.html
html object上层加div,JS详解[Object HTMLDivElement]和[Object Object]
weixin_35664081的博客
06-10 1096
【JS】☆★之详解[Object HTMLDivElement]和[Object Object]htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档$(function(){vartemp=$(".one");/...
html网页object对象怎么取值,网页弹出[Object HTMLDivElement]，怎么取值？
weixin_29563497的博客
07-20 979
jQuery语法目录: 一.选择网页元素二.改变结果集三.链式操作四.元素的操作五.元素的操作:移动六.元素的操作:复制.删除和创建七.工具方法八.事件操作九.特殊效果 一.选择网页元素这也是jQuery的基本设计思 ...R for installing package &&num;39&semi;omg&&num;39&semi;The time...
关于wangEditor 5在CDN的使用，vue2的使用以及报错解决
m0_61702149的博客
06-09 3754
关于wangEditor 5vue2的使用，一切就绪之后，我的webpack报错以及报错解决，在cdn的使用
自定义工具条一
陶罐的程序世界
02-12 404
<br />在CMainframe：：OnCreate函数中，添加如下代码（复制的系统提供的代码）：<br /><br />  if (!m_NewToolBar.CreateEx(this, TBSTYLE_FLAT, WS_CHILD | WS_VISIBLE | CBRS_TOP<br /><br /><br />  | CBRS_GRIPPER | CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) ||<br /><br />  !m_NewToolBa
创建工具条ToolBar
weixin_30741653的博客
03-27 342
/***ToolBar***/ QToolBar * tlb_ImageOpen; QToolBar * tlb_VideoOpen; QToolBar * tlb_AudioOpen; void MainWindow::createToolbar() { tlb_ImageOpen = addToolBar(tr("Image")); ...
原生JS代码封装（输入id名、class名、标签名 返回 "object HTMLDivElement"）
alanbiz1314的博客
05-05 396
object HTMLDivElement，即 HTMLDivElement 对象， 而这个对象是哪里来的呢？ 查阅 《JavaScript权威指南》中文第六版363页， 我们可以知道： HTMLDivElement 是 HTMLElement 的一个子对象， 而 HTMLElement 又是 Element 的子对象。 function $(selecto...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值