JavaScript--DOM基础

一、DOM查找方法

1.document.getElementById()
语法：document.getElementById(“id”)
功能：返回对拥有指定 ID 的第一个对象的引用
返回值：DOM对象

说明：id为DOM元素上id属性的值

<body>
    <div class="box" id="box">
        元素
    </div>
    <script>
        //获取id为box的这个元素
        var box=document.getElementById("box");
        console.log(box);
        /*<div class="box" id="box">
              元素
          </div>*/
        console.log(boxs);//null
    </script>
</body>

2.document.getElementsByTagName()
语法：document.getElementsByTagName(“tag”)
功能：返回一个对所有tag标签引用的集合
返回值：数组

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

<ul id="list1">
    <li>前端开发</li>
    <li>服务器端开发</li>
    <li>UI设计</li>
</ul>
<ol>
    <li>JavaScript原生</li>
    <li>JavaScript框架</li>
</ol>
<script>
    //获取页面中所有的li
    var lis=document.getElementsByTagName("li");
    console.log(lis.length);//5
    
    //获取id为list1下的所有li
    var lis2=document.getElementById("list1").getElementsByTagName("li");
    console.log(lis2);//[li, li, li]
</script>

二、设置元素样式

语法：ele.style.styleName=styleValue
功能：设置ele元素的CSS样式

说明：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称(不能使用"-"连字符形式font-size，要使用驼峰命名形式fontSize)
3、styleValue为设置的样式值

<div class="box" id="box">
    元素
</div>

<ul id="list">
    <li>前端开发</li>
    <li>服务器端开发</li>
    <li>UI设计</li>
</ul>

<script>
    //设置id为box的这个元素的文字颜色
    var box=document.getElementById("box");
    box.style.color='#f00';
    //属性是减号连接的复合形式时，必须转化为驼峰形式
    box.style.fontWeight='bold';
    
    var lis=document.getElementById("list").getElementsByTagName("li");//返回的是一个数组，不是一个dom对象
    //遍历每一个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='#ff0';
        }else if(i==2){
            lis[i].style.backgroundColor='#0f0';
        }
    }
</script>

三、innerHTML属性

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

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

<ul id="list">
    <li><i>前端开发<i></li>
    <li><b>服务器端开发<b></li>
    <li>UI设计</li>
</ul>

<script>
    var lis=document.getElementById("list").getElementsByTagName("li");
    for(var i=0,len=lis.length;i<len;i++){
        console.log(lis[i].innerHTML);
        /*前端开发
        服务器端开发
        UI设计*/
        
        /*<i>前端开发<i>
        <b>服务器端开发<b>
        UI设计*/
        
        //lis[i].innerHTML=lis[i].innerHTML+'程序';
        lis[i].innerHTML+='程序';
    }
</script>

四、className属性

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

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .current{background:#ccc;color: #f00;}
        .on{border-bottom: 1px solid #0f0;}
    </style>
</head>
<body>
    <div class="box" id="box">
        元素
    </div>
    
    <ul id="list">
        <li><i>前端开发<i></li>
        <li><b>服务器端开发<b></li>
        <li class="on">UI设计</li>
    </ul>
    
    <script>
        var lis=document.getElementById("list").getElementsByTagName("li");
        for(var i=0,len=lis.length;i<len;i++){
            console.log(lis[i].innerHTML);
            lis[i].innerHTML+='程序';
            lis[1].className="current";
            lis[2].className="current"; //原来的被替换了
        }
        console.log(document.getElementById("box").className);//box
    </script>   
</body>

五、在DOM元素上添加删除获取属性

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

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

2.设置属性
语法：ele.setAttribute(“attribute”,value)
功能：在ele元素上设置属性

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

3.删除属性
语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性

说明：
1、ele是要操作的dom对象
2、attribute是要删除的属性名称

<body>
    <p id="text" align="center" class="text"  data-type="title">文本</p>
    <input type="text" name="user" value="user" id="user" validate="true"/>
    <script>
        //获取属性
        var p=document.getElementById("text");
        var user=document.getElementById("user");
        console.log(p.id);//text
        console.log(p.align);//center
        console.log(p.class);//undefined
        console.log(p.className);//text
        
        console.log(p.getAttribute("data-type"));//title
        
        console.log(user.type);//text  自带的属性可以直接获取 不需要用getAttribute
        console.log(user.getAttribute("validate"));//true
        
        //设置属性
        //给p设置一个data-color的属性
        p.setAttribute("data-color","red");
        //给input设置一个isRed的属性
        user.setAttribute("isRed","false");
        
        
        //删除属性
        //删除p上的align属性
        p.removeAttribute("align");
    </script>   
</body>