深入浅出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为要删除的属性名称

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,640评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,254评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,011评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,755评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,774评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,610评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,352评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,257评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,717评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,894评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,021评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,735评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,354评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,936评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,054评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,224评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,974评论 2 355

推荐阅读更多精彩内容