JavaScript -- DOM

获取标签

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <div class="box" id="box">元素1</div>
    <ui id="list1">
        <li>后端</li>
        <li>前端</li>
        <li>测试</li>
    </ui>
    <ol>
        <li>java</li>
        <li>python</li>
    </ol>
        <script>
            //获取id为box的元素
            var box = document.getElementById('box');
            console.log(box);

            //获取页面中所有的li
            var lis = document.getElementsByTagName('li');
            console.log(lis.length);

            //获取id为list1下的所有li
            var lis2 = document.getElementById('list1').getElementsByTagName('li');
            console.log(lis2.length);

        </script>
    </body>

</html>
复制代码

结果：

标签属性的操作

对一个标签，我们可以获取属性，增加属性，删除属性

获取属性

语法：

ele. getAttribute(" attribute")

功能:获取ele元素的 attribute属性

说明:

1、ele是要操作的dom对象

2、 attribute是要获取的html属性(如:id、tpye)

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <p id="text" class="text" align="center" dtype="title">文本</p>
    <input type="text" name="user" value="user1" id="user" />
    <script>
        var p = document.getElementById('text');
        console.log(p.id);
        console.log(p.className);
        console.log(p.dtype);
    </script>
    </body>

</html>
复制代码

结果：

text
text
undefined

如果属性是内置的，像id，type（class要写成className）这些属性，可以直接通过标签.属性就可以获取到，如果不是内置的，这样写返回的值是undefined，想要获取自定义的属性，就要用到getAttribute了

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <p id="text" class="text1" align="center" dtype="title">文本</p>
    <input type="text" name="user" value="user1" id="user" />
    <script>
        var p = document.getElementById('text');
        console.log(p.getAttribute('id'));
        console.log(p.getAttribute('class'));
        console.log(p.getAttribute('dtype'));
    </script>
    </body>

</html>
复制代码

结果：

text
text1
title

设置属性

语法：

ele.setAttribute("attribute","value")

功能：在ele上设置属性

说明：

1.ele是要操作的dom对象

2.attribute为要设置的属性名称

3.value为设置的attribute属性的值

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <p id="text" class="text1" align="center" dtype="title">文本</p>
    <input type="text" name="user" value="user1" id="user" />
    <script>
        var p = document.getElementById('text');
        // 给p标签设置一个data-color的属性
        p.setAttribute('data-color','red');
    </script>
    </body>

</html>
复制代码

删除属性

语法：

ele.removeAttribute("attribute")

功能：删除ele上的attribute属性

说明：

1.ele是要操作的dom对象

2.attribute为要删除的属性名称

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <p id="text" class="text1" align="center" dtype="title">文本</p>
    <script>
        var p = document.getElementById('text');
        // 删除p标签的align属性
        p.removeAttribute('align');
    </script>
    </body>

</html>
复制代码

设置元素样式

在之前的学习中，我们通过css给标签设置样式，比如颜色，背景色等等。我们也可以使用JS来给标签设置样式

语法：

ele.style.styleName=styleValue

功能：

设置ele元素的CSS样式

说明：

1.ele为要设置样式的DOM对象

2.styleName为要设置的样式名称

3.styleValue为要设置的样式值

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <div class="box" id="box">元素1</div>
    <ui id="list1">
        <li>后端</li>
        <li>前端</li>
        <li>测试</li>
    </ui>
    <ol>
        <li>java</li>
        <li>python</li>
    </ol>
        <script>
            //设置id为box的这个元素的文字颜色，属性如果是-连接的复合形式时
            //必须要转换成驼峰形式
            var box = document.getElementById('box');
            box.style.color='red';
            box.style.fontWeight='bold';

            var lis = document.getElementById('list1').getElementsByTagName('li');
            //遍历每一个li
            for (var i = 0,len = lis.length;i<len;i++){
                lis[i].style.color='blue';
                if (i==0){
                    lis[i].style.background='#ccc';
                }else if(i==1){
                    lis[i].style.background='#666';
                }else if(i==2){
                    lis[i].style.background='#999';
                }else {
                    lis[i].style.background='#333';
                }
            }

        </script>
    </body>

</html>
复制代码

innerHTML

语法：

ele.innerHTML

功能：

返回ele元素开始和结束标签之间的内容（文本或html标签都可以）

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <div class="box" id="box">元素1</div>
    <ui id="list1">
        <li><i>后端</i></li>
        <li>前端</li>
        <li>测试</li>
    </ui>
    <ol>
        <li>java</li>
        <li>python</li>
    </ol>
        <script>

            var lis = document.getElementById('list1').getElementsByTagName('li');
            //遍历每一个li
            for (var i = 0,len = lis.length;i<len;i++){
                console.log(lis[i].innerHTML);
            }

        </script>
    </body>

</html>
复制代码

结果：

<i>后端</i>
前端
测试

语法：

ele.innerHTML=‘html’

功能：

设置ele元素开始和结束标签之间的内容

复制代码
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
    <div class="box" id="box">元素1</div>
    <ui id="list1">
        <li><i>后端</i></li>
        <li>前端</li>
        <li>测试</li>
    </ui>
    <ol>
        <li>java</li>
        <li>python</li>
    </ol>
        <script>

            var lis = document.getElementById('list1').getElementsByTagName('li');
            //遍历每一个li
            for (var i = 0,len = lis.length;i<len;i++){
                lis[i].innerHTML=lis[i].innerHTML+'开发';
            }

        </script>
    </body>

</html>
复制代码

 

posted @   邹邹很busy。  阅读(218)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示

目录导航