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

JS组成

课程概要

image.png

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

    
    

        

            
li1
            
li2
            
li3
            
li4
        
    
    
    
     

image.png

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

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

编程练习

编程练习

    
        
        
        
    
    

        
古文推荐
        

            
西游记
            
红楼梦
            
三国演义
            
聊斋志异
            
论语
            
大学
            
孟子
            
中庸
                 
        
    
    
     

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