深入浅出JavaScript8章节第04章DOM基础

JS组成
课程概要
image.png

DOM查找方法
1.ById()
语法:doucument.getElementById("id")
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值
2.ByTagName
语法:document.getElementsBtTayName("tay")
功能:返回一个对所有tag标签引用的集合
返回值:数组
说明:tag为要获取的标签的名称

<body>
    
    <div id='s1'>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
        </ul>
    </div>
    
    <script type="text/javascript">
        var box = document.getElementById('s1');
        var lis = document.getElementsByTagName('li');
        console.log(box);
        console.log(lis);
    </script>
    </body> 
image.png

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

<script type="text/javascript">
        var box = document.getElementById('s1');
        var lis = document.getElementsByTagName('li');
//      box.style.color='aquamarine';
        for(var a=0,b=lis.length;a<b;a++){
            lis[a].style.color='chartreuse';
        }
        
    </script>
image.png
image.png

第二部分
1.innerHTML
语法:ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML
语法:ele.innerHTML="html"
功能:设置ele元素开始和结束标签之间的HTML内容问哦html

image.png

2.className
语法:ele.className
功能:返回ele元素的class属性
语法ele.className="cls"
功能:设置ele元素的class属性为cls

编程练习

编程练习
<!DOCTYPE html>
<html>
    <head lang="cn">
        <meta charset="utf-8" />
        <title>BTS</title>
        <style type="text/css">
            .red{color:red}
        </style>
    </head>
    <body>

        <h3>古文推荐</h3>
        <ul>
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>聊斋志异</li>
            <li>论语</li>
            <li>大学</li>
            <li>孟子</li>
            <li>中庸</li>                 
        </ul>
    
    <script type="text/javascript">
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        for(var a=0;a<lis.length;a++){
//          console.log('test');
            if(a%2 ==0){
                lis[a].className='red';
            }
            lis[a].innerHTML='第'+(a+1)+"名:"+lis[a].innerHTML;
        }
    </script>
    </body> 
</html>

image.png

获取属性
语法:ele.getAttribute("attribute")
功能:获取ele元素的attribute属性
说明:
1.ele是要操作的dom对象
2.attribbute是要获取的html属性(如:id,type)

设置属性
语法:ele.setAttribute("attribute",value)
功能:在ele元素上设置属性
说明:
1.ele是要操作的dom对象
2.attribute为要设置的属性名称
3.value为设置的属性

删除属性
语法:ele.removeAttribute("attribute")
功能:删除ele上的attribute属性
说明:
1.ele是dom对象
2.attribute为要删除的属性名称

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容