前端系列之JavaScript(DOM基础)

最新推荐文章于 2023-02-14 19:08:18 发布

众拾达人

最新推荐文章于 2023-02-14 19:08:18 发布

阅读量270

点赞数

分类专栏：前端文章标签： javascript 前端 dom

本文链接：https://blog.csdn.net/wtdask/article/details/79152415

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

这里写图片描述

DOM基本的查找方法

document.getElementById()
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值

document.getElementsByTagName()
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box" id="box">
            元素
        </div>
        <ul id="list1">
            <li>前端开发</li>
            <li>服务器端开发</li>
            <li>UI设计</li>
        </ul>
        <ol>
            <li>javaScript原生</li>
            <li>javaScript框架</li>
        </ol>
        <script>
            //获取id为box的元素
            var box =document.getElementById("box");
            console.log(box);

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

            //获取id为list1下的所有li
            var lis2=document.getElementById("list1").getElementsByTagName("li");
            console.log(lis2);
        </script>
    </body>
</html>

如何给元素的设置样式

功能：设置ele元素的CSS样式
语法：ele.style.styleName=styleValue
说明：
1.ele为要设置样式的DOM对象
2.styleName为要设置的样式名称
3.styleValue为设置的样式值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box" id="box">
            元素
        </div>
        <ul id="list1">
            <li>前端开发</li>
            <li>服务器端开发</li>
            <li>UI设计</li>
        </ul>
        <script>
            //获取id为box的元素  
            var box =document.getElementById("box");
            //设置id为box的元素颜色,属性使用连字符的复合形式必须要转换成驼峰形式
            box.style.color='#F5704F';
            box.style.fontWeight='bold';

            //获取页面中所有的li
            var lis=document.getElementById("list1").getElementsByTagName("li");
            //遍历每个li
            for(var i=0,len=lis.length;i<len;i++){
                lis[i].style.color='#00f';
                if(i==0){
                    lis[i].style.backgroundColor='#ccc';
                }else if(i==1){
                    lis[i].style.backgroundColor='#666';
                }else if(i==2){
                    lis[i].style.backgroundColor='#999';
                }else{
                    lis[i].style.backgroundColor='#333';
                }
            }
        </script>
    </body>
</html>

innerHTML属性应用

功能：返回els元素开始和结束标签之间的HTML
语法：ele.innerHTML

功能：设置ele元素开始和结束标签之间的HTML内容为html
ele.innerHTML="html"

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="list1">
            <li><i>前端开发</i></li>
            <li><b>服务器端开发</b></li>
            <li>UI设计</li>
        </ul>
        <script>
            //获取页面中所有的li
            var lis=document.getElementById("list1").getElementsByTagName("li");
            //遍历每个li
            for(var i=0,len=lis.length;i<len;i++){

                lis[i].innerHTML+='程序';
                console.log(lis[i].innerHTML);
            }
        </script>
    </body>
</html>

className属性应用

功能：返回ele元素的class属性
语法：ele.className

功能：设置ele元素的class属性为cls
语法：ele.className=’cls’

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .on{
                border-bottom: 1px solid #0f0;
            }
            .current{
                background: :#ccc;
                color: #f00;
            }
        </style>
    </head>
    <body>
        <ul id="list1" class="listClass">
            <li><i>前端开发</i></li>
            <li class="on"><b>服务器端开发</b></li>
            <li>UI设计</li>
        </ul>
        <script>
            //获取页面中所有的li
            var lis=document.getElementById("list1").getElementsByTagName("li");
            //遍历每个li
            for(var i=0,len=lis.length;i<len;i++){

                lis[i].innerHTML+='程序';
                console.log(lis[i].innerHTML);

                lis[1].className="current";
            }
            console.log(document.getElementById("list1").className)
        </script>
    </body>
</html>

说明：动态添加class替换元素本身的class

DOM元素获取属性或添加删除属性

获取属性：

语法：ele.getAttribute("attribute")
功能：获取ele元素的attribute属性

说明：1、ele是要操作的dom对象 2、attribute是要获取的html属性（如：id、type）

设置属性：

语法：ele.setAttribute(“attribute”,value)

功能：在ele元素上设置属性

说明：1、ele是要操作的dom对象 2、attribute为要设置的属性名称 3、value为设置的attribute属性的值

这里写图片描述

删除属性：

语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性
说明：1、ele是要操作的dom对象 2、attribute是要删除的属性名称

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="text" class="text1" align="center" curData= "title">文本</p>
        <input type="text" name="user" value="user" id="user" validate="true"/>
        <script>
            var p=document.getElementById("text");
            //标签本身就具有的属性，class除外
            console.log(p.id);
            console.log(p.align);

            console.log(p.class);//获取不到
            console.log(p.curData);//获取不到

            //使用getAttribute
            console.log(p.getAttribute("class"));//等价于p.className
            console.log(p.getAttribute("curData"));

            var user=document.getElementById("user");//null
            console.log(user.type);
            console.log(user.name);
            console.log(user.validate);//undefined
            console.log(user.getAttribute('validate'));//true

            //添加属性
            //给p设置一个data-color的属性
            p.setAttribute("data-color","red");

            //给input设置一个isRead的属性
            user.setAttribute("isRead","false");


            //删除属性
            //shanc
            //删除p上的align属性
            p.removeAttribute("align");
        </script>
    </body>
</html>

众拾达人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端系列之JavaScript(DOM基础)

DOM基本的查找方法document.getElementById() 功能：返回对拥有指定ID的第一个对象的引用返回值：DOM对象说明：id为DOM元素上id属性的值document.getElementsByTagName() 功能：返回一个对所有tag标签引用的集合返回值：数组说明：tag为要获取的标签名称。<!DOCTYPE html><html> <head>
复制链接

扫一扫