DOM节点操作

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

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

 

 

转载于:https://www.cnblogs.com/wdz1/p/7479948.html