Web前端学习JS篇之“DOM元素操作”

最新推荐文章于 2023-01-24 13:13:44 发布

静驭沧海

最新推荐文章于 2023-01-24 13:13:44 发布

阅读量358

点赞数 2

文章标签： web 前端 js dom

本文链接：https://blog.csdn.net/weixin_38159245/article/details/100919809

版权

一般意义上讲，JS包含DOM、BOM和ECMAScript，DOM和BOM可以看作是Web API，主要用于操作页面，ECMAScript是传统意义上的一门包含语法的语言，类似于Java，C。

首先，我们应该知道什么是DOM（document object model），由W3C制定标准，文档对象模型，这样可能太抽象了。

简单说，一个页面就是一个文档document，里边的内容都是对象，这样就构建了一个DOM树，一个大的模型。所有标签都是元素element，页面中的内容都是节点node，这些都是对象。

值得一提的是，console.dir()这个方法可以打印元素对象，查看全部的属性和方法。

本次分享：DOM的元素操作方法

一、获取页面基本元素（5种）

1. 通过ID获取：document.getElementById("test1");

【注】没有任何兼容问题 ,ID的值区分大小写，返回值是元素对象。

2. 通过标签名获取：document.getElementsByTagName("li");

【注1】返回的是一个伪数组（只有一个li也是伪数组，没有li时是空伪数组），无兼容问题。

【注2】如果有父元素ol,获取ol中的li: ol[0].getElementsByTagName('li')，ol也是通过标签拿到的，所以也是伪数组，但提取时必须是单个的，所以是ol[0]。

3.（H5新增）通过类名获取：document.getElementsByClassName("test2");

【注】得到一个伪数组，不能直接操作，一般都是遍历，IE678不兼容。

4.（H5新增）通过选择器获取：document.querySelector(" ");//常用！！！！！

【注】有很多重复的选择器名时，querySelector("选择器") 只能得到里边的第一个，标签选择器，类选择器，ID选择器，属性选择器都可以，IE67不兼容。

5.（H5新增）选择器遍历获取：document.querySelectorAll(" ");

【注】针对上条不能全部获取的情况，这个会返回指定选择器的所有元素。

二、获取页面特殊元素（2种）

1. 获取body：document.body；

2. 获取html：document.documentElement；//注意不是document.html

三、操作页面常见元素（7种）

1. 改变元素内容：

element.innerText = " "或function()；（不识别HTML标签，会去除空格和换行）

element.innerHTML = " "或function()；（W3C制定，识别HTML标签，保留空格和换行）

【注】两个属性都是可读写的，可以获取里边的元素console.log(p.innerHTML)

2. 改变元素属性（固有属性）：比如 img.src、img.href、img.title等

3. （特殊）表单的元素属性：type、value 、checked、selected、disabled

4. 改变样式属性：

行内样式：element.style（驼峰写法backgroundColor）

类名样式：element.className//适用于修改样式比较多

5. 获取属性值：

element.id（获取自身带有的属性，比如<div id = "test"></div>中的id是原本就有的）

element.getAttribute("id")（获取自定义的属性，比如<div data-index = "test"></div>就是自定义的）

【注】自定义属性的说明：它的出现是为了保存和使用数据，要用data-作为开头并且赋值，dataset是一个集合，存放了所有以data开头的属性，比如我们定义了一个data-index，那么就可以直接通过dataset.index去访问。

6. 更改属性值：

element.id = "新值"

element.setAttribute("属性","值")//主要针对自定义属性

7. 移除属性值：element.removeAttribute("属性")//主要针对自定义属性

四、操作页面节点元素（8种）

逻辑性更强！！！！

节点的3个属性：

nodeType:元素节点为1，属性节点2，文本节点3，文本包含文字空格换行等。

nodeName

nodeValue

1. 父节点：node.parentNode//得到的是亲爸爸，而不是叔叔，爷爷

2. 子节点：node.childNodes

【注】会获取所有的节点，包括文本（这个就很坑），所以用node.children（不会有副作用）

3. 获取首末子节点：先用firstChild和lastChild(包括文本)，然后用firstElementChild和lastElementChild(但IE9才支持)，最后用children[0]和children[node.children.length-1]

4. 兄弟节点：node.previousSibling和node.nextSibling(包括文本)，所以用nextElementSibling和lastElementSibling

5. 动态创建节点：document.createElement('tagName');//创建之后要添加才有效果

6. 添加节点：node.appendChild(child);//添加到父节点的子节点列表末尾，类似于css的after

7. 删除节点：node.removeChild(child);

8. 复制节点：node.cloneNode();//这个括号为空或false时，称为浅拷贝，不会复制节点中的内容，为true时就为深拷贝。

【注】克隆之后记得使用node.appendChild()来添加！！！！

五、三种动态创建元素的区别

document.write()//使用较少，页面加载完毕后调用此方法，会导致页面的全部重绘。

element.innerHTML//元素写入法，拼接字符串时效率比较低，可以考虑使用数组

document.createElement()//节点创建法，结构清晰

六、DOM操作的一些小案例

<body>
        <h3>案例1：分时问候，分时间显示不同的图片和问候语</h3>
        <div class="example1">        
            <img src=" ">
        </div>
        <script>
            var img = document.querySelector('img');
            var date = new Date();
            var second = date.getSeconds();
            if(second<20){
                img.src = './DOM/fengyun001.jpeg'
            }
            if(second>=20&&second<40){
                img.src = './DOM/fengyun002.jpeg'
            }
            if(second>40){
                img.src = './DOM/fengyun003.jpeg'
            }
        </script>
</body>

<body>
        <h3>案例2：密码明文</h3>
        <div class="example1">        
            <input type="password" name=" " id=" ">
            <button>显示密码</button>
        </div>
        <script>
           var btn = document.querySelector("button");
           var pass = document.querySelector("input");
           var flag = 0;//通过标志位来进行切换
            btn.addEventListener('click',function(){
                if(flag == 0){
                    pass.type = 'text';
                    btn.innerHTML = '隐藏密码';
                    flag = 1;
                }
                else{
                    pass.type = 'password';
                    btn.innerHTML = '显示密码';
                    flag = 0;
                }   
            })           
        </script>
 </body>

<body>
        <h3>案例4：密码提示错误</h3>
        <div class="example1">        
            <input type="text" name=" " >
            <p>请输入6-8位密码</p>
        </div>
        <script>
           var ptext = document.querySelector("p");
           var pass = document.querySelector("input");         
            pass.addEventListener('blur',function(){
                if(pass.value.length>=6 && pass.value.length<=8){
                    ptext.innerHTML = '验证通过';
                    ptext.style.color='green';
                }
                else{
                    ptext.innerHTML = '验证失败';
                    ptext.style.color='red';
                }
            })
        </script>
</body>

<style>
            body{
                background: url() no-repeat ;
                background-size: cover;
            }
            .example1{
                display: flex;
                justify-content: center;
            }          
            h3 {
                color:blueviolet;
                text-align: center;
            }
            img{
                width:200px;
                margin:5px;
            }   
        </style>    
<body>
        <h3>案例5：百度换肤</h3>
        <div class="example1">        
            
                <img src="./DOM/fengjing001.jpg">
                <img src="./DOM/fengjing002.jpg">  
                <img src="./DOM/fengjing003.jpeg">              
        </div>
        <script>
            var imgs = document.querySelectorAll('img');         
            for(var i = 0;i<imgs.length;i++){
                imgs[i].addEventListener('mouseover',function(){
                    document.body.style.backgroundImage = 'url('+this.src+')';
                })
            }
        </script>
</body>

<body>
        <h3>案例6：表格各行变色</h3>
        <div class="example1">        
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>成绩</th>
                    </tr>   
                </thead> 
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>11</td>
                        <td>男</td>
                        <td>60</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>12</td>
                        <td>男</td>
                        <td>60</td>
                        </tr>
                    <tr>
                        <td>张三</td>
                        <td>13</td>
                        <td>男</td>
                        <td>60</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>14</td>
                        <td>男</td>
                        <td>60</td>
                    </tr>
                    
                </tbody>
            </table>                        
        </div>
        <script>
           var trs = document.querySelector('tbody').querySelectorAll('tr');
           for(var i =0;i<trs.length;i++){
               trs[i].addEventListener('mouseover',function(){
                   this.style.backgroundColor = 'green';
               }),
               trs[i].addEventListener('mouseout',function(){
                   this.style.backgroundColor = 'white';
               })
           } 
        </script>
</body>

  <body>
        <h3>案例7：全选按钮</h3>
        <div class="example1">        
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>成绩</th>
                    </tr>   
                </thead> 
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>11</td>
                        <td>男</td>
                        <td>60</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>12</td>
                        <td>男</td>
                        <td>60</td>
                        </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>13</td>
                        <td>男</td>
                        <td>60</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>14</td>
                        <td>男</td>
                        <td>60</td>
                    </tr>
                    
                </tbody>
            </table>                        
        </div>
        <script>
           var input1 = document.querySelector('thead').querySelector('input'); 
           var input2 = document.querySelector('tbody').querySelectorAll('input');
           input1.addEventListener('click',function(){
            for(var i = 0; i<input2.length;i++){
                    input2[i].checked = this.checked;
                }
           })
        </script>
    </body>

静驭沧海

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习JS篇之“DOM元素操作”

一般意义上讲，JS包含DOM、BOM和ECMAScript，DOM和BOM可以看作是Web API，主要用于操作页面，ECMAScript是传统意义上的一门包含语法的语言，类似于Java，C。首先，我们应该知道什么是DOM（document object model），由W3C制定标准，文档对象模型，这样可能太抽象了。简单说，一个页面就是...
复制链接

扫一扫