JS DOM基础

【知识点】

1、掌握基本的DOM查找方法
document.getElementById()
document.getElementsByTagName()
2、掌握如何设置DOM元素的样式

一、DOM查找方法

【语法】：

document.getElementById("id")

【功能】：
返回对拥有指定ID的第一个对象的引用

【返回值】：DOM对象

【说明】：id为DOOM元素上id属性的值

二、DOM查找方法

【语法】：

document.getElementsByTagName("tag")

【功能】：
返回一个对所有tag标签引用的集合

【返回值】：数组

【说明】：tag为要获取的标签名称

【DOM查找方法·案例】：

    
    


    

        元素1
    
    

        
前端开发
        
服务器端开发
        
UI设计
    
    

        
javaScript原生
        
javaScript框架
    
    

【结果】：

三、设置元素样式

【语法】：

ele.style.styleName=styleValue

【功能】：
设置ele元素的CSS样式

【说明】：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称
3、styleValue为设置的样式值

【设置元素样式·案例】

    
    


    

        元素1
    
    

        
前端开发
        
服务器端开发
        
UI设计
        
UI设计
        
UI设计
    
    

【结果】：

【知识点】：

1、掌握innerHTML属性的应用
2、掌握className属性的应用
3、掌握如何在DOM元素上添加删除获取属性

一、innerHTML

【语法】：

ele.innerHTML

【功能】：
返回ele元素开始和结束标签之间的HTML

【语法】：

ele.innerHTML="html"

【功能】：
设置ele元素开始和结束标签之间的HTML内容为html

二、className

【语法】：

ele.className

【功能】：
返回ele元素的class属性

【语法】：

ele.className="cls"

【功能】：
设置ele元素的class属性为cls

【innerHTML和className案例】

    
    
    


    

        元素1
    
    

        
前端开发
        
服务器端开发
        
UI设计
    
    

【结果】：

三、获取属性

【语法】：

ele.getAttribute("attribute")

【功能】：
获取ele元素的attribute属性

【说明】：
1、ele是要操作的dom对象
2、attribute是要获取的html属性

四、设置属性

【语法】：

ele.setAttribute("attribute",value)

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

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

五、删除属性

【语法】：

ele.removeAttribute("attribute")

【功能】：
删除ele上的attribute属性

【说明】：
1、ele是要操作的dom对象
2、attribute是要删除的属性名称
【getAttribute和setAttribute·案例】

    
    
    


    
文本
    
    

【结果】：