javascript基础DOM对象6.0

9、DOM对象

HTML代码：

<div id="dd">
演示
</div>

<ul>
　　<li>空调</li>
　　<li class = "sp">空空</li>
　　<li>冰镇西瓜</li>
</ul>

<span class = "sp">
　　根据class来获取对象
</span>

<p name="pp">name=dd</p>
<i name="pp">name=dd</i>
<a name="pp">name</a>

<ol>
　　<li>吃饭</li>
　　<li>睡觉</li>
　　<li>打豆豆</li>
<ol>

javascript代码：

（1）、通过id来获取元对象

//根据id值获取  对象
var obj = document.getElementById("dd");
//为对象设置css样式  属性值要双引号
obj.style.color = "red";

（2）、根据标签名来获取对象

//document.getElementsByTagName("标签名");返回一个集合【数组】
//这里取到的是所有li  所以lis里面元素有多个
var lis = document.getElementsByTagName("li");
//设置背景颜色为绿色
lis[2].style.backgroundColor = "green";
//设置字体颜色为红色
lis[2].style.color = "red";

（3）、通过class属性值来获取对象

//根据class的属性值
var temps = document.getElementsByClassName("sp");
//对获取的很多个sp  进行遍历
for (var i<0; i<temps.length; i++) {
    temps[i].style.color = "orange";
    temps[i].style.backgroundColor = "grey";
    temps[i].style.fontSize = "40px";
}

（4）、通过name属性值来获取对象

//返回一个集合
var pps = document.getElementsByName("pp");

for (var i=0; i<pps.length; i++) {
    pps[i].style.color = "green";
    pps[i].style.display = "block";
    pps[i].style.border = "1px solid blue";
}

（5）、HTML5中新提供的方式

只返回匹配到的第一个元素，返回的是一个对象。

//document.querySelector("选择器");
var fli = document.querySelector("ol>li");
//只为一个元素设置
fli.style.color = "blue";

返回所有匹配的元素，返回值都是集合【数组】 

//document.querySelectorAll("选择器");
var olis = document.querySelectorAll("span");
for (var i=0; i<olis.length; i++) {
    olis[i].style.color = "red";
    olis[i].style.fontSize = "50px";
}

 （6）、练习

HTML代码：

<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

　　<ul id="u1">
　　　　<li class="orange">抽烟</li>
　　　　<li>喝酒</li>
　　　　<li>烫头</li>
　　</ul>

练习6-1：点击变为字体变为红色，再次点击变回颜色

javascript代码：

//通过js代码绑定事件
//当使用循环绑定事件时，this指代当前触发事件的元素对象
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
//为单个元素添加点击事件
    lis[i].onclick = function() {
//这里进行判断 如果当前字体颜色为红色  则更改字体颜色
        if(this.style.color = "red") {
            this.style.color = "black";
        }
        else {
            this.style.color = "red";
        }
    };
}

练习6-2：鼠标悬停事件，鼠标移动导致颜色变化

javascript代码：

var lis = document.querySelectorAll("#ul>li");
for(var i=0; i<lis.length; i++） {
//:hover 也可以达到效果
//鼠标悬停
    lis[i].onmouseover = function() {
        this.className = "orange";
    };
//鼠标移出
    lis[i].onmouseout = function() {
    this.className = "";
    };

//另一种方式实现
/*lis[i].onmouseover = function() {
  var temp = document.querySelector("#ul>.orange");  

  temp.className = "";
//鼠标在上时  此时颜色为橙色
  this.className = "orange";    
}*/

 练习6-3：点击块更改背景颜色

HTML代码：

<div id="div1" class="redtooarange" index="jds">
又是美好的一天
</div>
<input type="button" id="btn1" value="移出div中的index属性/>

CSS代码：

#div1 {
    font-family: "微软雅黑";
    font-size: 40px;
     300px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.redtooarange{
    color: red;
    background-color: yellow;
}
.orange_red {
    color: yellow;
    background-color: red;
}

javascript代码：

方法a

var obj = document.getElementById("div1");
obj.onclick = function() {
//如果点击字体样式为红色   则改变字体为黄  背景为红  
    if(this.style.color = "red") {
        this.style.color = "yellow";
        this.style.backgroundColor = "red";
    }
    else {
//反之 字体变为红色  背景变为黄色
        this.style.color = "red";
        this.style.backgroundColor = "yellow";
    }
}

方法b

var obj=document.getElementById("div1");
obj.onclick=function(){
    if(this.className == "redtooarange") {
        this.className = "orange_red";
    }
    else {
        this.className = "redtooarange";
    }
}

移除属性

//获取按钮对象
var btn = document.getElementById("btn1");
//按钮点击事件
btn.onclick = function() {
//获取div块元素
    var dd = document.getElementById("div1");
//删除div的属性
    dd.removeAttribute("index");
};

练习6-4：对网页中的文本进行操作

HTML代码：

<div id="div1">
    操作内容
</div>
<input type="button" id="btn1" value="修改内容" />
<ul>              
    <li>西瓜</li>   
    <li>葡萄</li>   
</ul>
<input type="button" id="btn2" value="添加到 西瓜前" />
<input type="button" id="btn3" value="添加到 葡萄后" />             

CSS代码：

#div1{                       
    width: 400px;            
    height: 400px;           
    border: 1px solid black; 
}                            

div块中内容的修改：

var btn = document.getElementById("btn1");
btn.onclick = function() {
//获取div块的对象
    var dd = document.getElementById("div1");
//标签内部的内容
    dd.innerHTML = "修改了内容";
//追加内容
    dd.innerHTML += ”追加的内容";
//追加含有HTML标签的内容
    dd.innerHTML += "<br><span>这是追加的span标签</span>";
};

 

在ul块前面添加li元素：

//用来计数的
var no = 0;
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
     //获取ul列表对象
    var li = document.createElement("li");
    li.innerHTML = "新增的li" + no;
    no++;
    li.style.color = "green";
    var ul = document.querySelector("ul");
//找到要插入的位置的标签对象
    var oli = document.querySelector("ul>li");

//将元素插入到指定位置
    ul.insertBefore(li, oli);

在ul列表后添加li块元素：

var btn3 = document.getElementById("btn3")'
btn3.onclick = function() {
    var ul = document.querySelector("ul");
    ul.innerHTML += "<li>香蕉</li>";
//创建标签对象
    var t = document.createElement("li");

//对对象的操作
    t.innerHTML = "水蜜桃";
    t.style.color = "red";
    t.style.backgroundColor = "green";
    var ul  = document.querySelector("ul");

//把创建的对象，添加到父级元素的末尾
    ul.appendChild(t);
};

 练习6-5：点击列表中的图片，显示到指定区域

HTML代码：

<div id="container">                                                         
    <div><img src="img/Desert.jpg" width="500" height="400" id="img1"/></div>
    <ul>                                                                     
        <li><img src="img/Desert.jpg"/></li>                                 
        <li><img src="img/Hydrangeas.jpg"/></li>                             
        <li><img src="img/Jellyfish.jpg"/></li>                              
        <li><img src="img/Koala.jpg"/></li>                                  
        <li><img src="img/Lighthouse.jpg"/></li>                             
    </ul>        
</div>                                                                                                   

CSS代码：

*{                      
    padding: 0;         
    margin: 0;          
}                       
#container{             
    width: 700px;       
    height: 600px;      
    text-align: center; 
    margin: 0 auto;     
}                       
ul{                     
    list-style: none;   
}                       
ul>li{                  
    float: left;        
    width: 100px;       
    height:80px ;       
    margin-left: 40px;  
}                       
ul img{                 
    width: 100px;       
    height:80px;        
}                       

javascript代码：

//获取所有图片 并返回集合
var imgs= document.querySelectorAll("ul img");   
//遍历集合中每个图片元素
for(var i=0;i<imgs.length;i++){               
//对每个图片对象进行事件绑定   
    imgs[i].onclick=function(){         
//存放当前被点击图片的路径         
        var src=this.src;                        
//获取显示区域的对象
        var obj=document.getElementById("img1"); 
//进行路径赋值
        obj.src=src;                             
    };                                           
}