码迷,mamicode.com
首页 > 其他好文 > 详细

DOM节点操作

时间:2017-09-05 19:12:50      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:click   inner   jpg   href   显示   font   技术   div   value   

1、修改 class 属性要写成className:因为clas是关键字
2、.innerHTML修改标签中的文字
 

给页面添加节点document.createElement()

var aa=document.createElement("li");//在文档中添加一个li标签
var div=document.createElement("口袋空空的");//不可以

技术分享

拓展标签属性

//value:标签的value属性。
        console.log(document.getElementById("inp1").value);

    //innerHTML:获取双闭合标签里面的内容。(识别标签)
        console.log(document.getElementById("box1").innerHTML);
        document.getElementById("box1").innerHTML="<h1>我是innerHTML</h1>";

    //innerText:获取双闭合标签里面的内容。(不识别标签)(老版本的火狐用textContent)
        console.log(document.getElementById("box3").innerText);
        document.getElementById("box3").innerText="<h1>innerText</h1>";

技术分享

获取属性的方式

1.元素节点 . 属性 或者 元素节点[属性] (操作的是对象  添加的属性可以访问到)

 console.log(ele.src);
    console.log(ele["src"]);
    console.log(ele["className"]); //获取css

2.元素节点。方法(操作的是页面,添加属性值可以显示在页面上,也可以访问)

console.log(ele.getAttribute("alt"));//获取
    ele.setAttribute("alt","你好"); //设置
    ele.removeAttribute("class"); //删除

案例

   //切换图片换连接
 
   <a href="https://www.baidu.com/" style="display: block; margin:10px 0;" >切换</a>
    <img id="img" src="../image/1-small.jpg">

    var a=document.getElementsByTagName("a")[0];
    var img=document.getElementById("img");

    a.onclick=function fn() {
        img.src="../image/1.jpg";
        //return false; 禁止a连接跳转
        return false;
    }

 

美女相册案例

 

 //获取事件源
    var ul=document.getElementById("imagegallery");
    var aArr=ul.getElementsByTagName("a");
    var img=document.getElementById("image");
    var p=document.getElementById("p");
    // 绑定事件
    for(var i=0; i<aArr.length; i++){
        aArr[i].onclick=function(){
            //循环绑定事件的时候,用到i的时候用this,不要用他本身aArr[i]
            alert(aArr[i]);
            //this指的是函数的调用者,和i并没有关系
            ///img.src=this.href;
            img.src=aArr[i].href;//跳转到a连接图片里面,
            p.innerHTML=this.alt;
            return false;//禁止跳转到a连接图片里面,
        }
    }

 

拓展

 

<div onclick="fu()">点击</div>
 <!--点击的时候,已经加载执行完毕了,所以访问不到-->
    <script>
     /*  console.log(fu(2,3));
       function fu(a,b){
           return c=a+b;
        }*/
    //页面加载完毕后执行里面的函数。执行后就没有了 这样的方法不适合在外面调用,
     window.onload=function aaa(){
         console.log(123);
         function fu(){
             console.log("生活")
         }
     }
     function fu(){
         console.log(456)
     }//只能访问到页面加载完后面的函数

这样的方法才可以,把函数点击事件写在里面,而不是在外面调用

 

技术分享

 

DOM节点操作

标签:click   inner   jpg   href   显示   font   技术   div   value   

原文地址:http://www.cnblogs.com/wdz1/p/7479948.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!