zoukankan      html  css  js  c++  java
  • DOM

    一、document.getElementById()    根据id获取元素节点

    <p id="jintian">今天是星期四</p>
    <p id="mingtian">明天是星期五</p>
    
    var mingtian=document.getElementById("mingtian").innerHTML;
    alert(mingtian);   //弹出 明天是星期五

    二、document.getElementsByTagName()     根据标签名获取元素节点,返回的是一个nodeList对象,可以遍历输出,也可以根据索引号选择其中一个。

    <p id="jintian">今天是星期四</p>
    <p id="mingtian">明天是星期五</p>
    
    var p=document.getElementsByTagName("p")[0].innerHTML;
    alert(p);   //今天是星期四
    
    var p=document.getElementsByTagName("p");
    for(var i=0;i<p.length;i++){
        alert(p[i]);  //分两次弹出 今天是星期四;明天是星期五;
    }  

    三、document.getElementsByClassName()    根据class获取元素节点                //ie 6 7 8不支持

    <p id="jintian" class="jintian">今天是星期四</p>
    <p id="mingtian">明天是星期五</p>
    
    var p=document.getElementsByClassName("jintian")[0].innerHTML;
    alert(p);   //今天是星期四

    四、javascript中的css选择器

     document.querySelector()    //根据CSS选择器的规则,返回第一个匹配到的元素
     document.querySelectorAll()    //根据CSS选择器的规则,返回所有匹配到的元素
    
        <div id="div1">
            <p id="p1" class="class1">
                我是第一个P</p>
            <p id="p2" class="class2">
                我是第二个P</p>
        </div>
    
            window.onload = function () {
                var node = document.querySelector("#div1 > p");    
                alert(node.innerHTML);                //输出  我是第一个P
    
                var node1 = document.querySelector(".class2");
                alert(node1.innerHTML);                //输出  我是第二个P
    
                var nodelist = document.querySelectorAll("p");
                alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML);    //输出  我是第一个P - 我是第二个P
            }

    五、文档结构和遍历

    1、parentNode      获得该节点的父节点         //兼容性良好

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    window.onload=function(){
    
        var jintian=document.getElementById("jintian");
        console.log(jintian.parentNode.innerHTML);   //输出 <p id="jintian" class="jintian">今天是星期四</p><p id="mingtian">明天是星期五</p> 
    
    }
               

    2、childNodes    获得指定节点的子节点           //        ie 6 7 8获得指定元素的子元素节点     高级浏览器获得指定元素所有子节点,包括文本节点。 不推荐使用 

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>

    var div1=document.getElementById("div1");
    alert(div1.childNodes.length); //5  为什么是5而不是2呢,因为这个方法会把文本节点也算其中,也就是说0,2,4是文本节点。

     

    3、children  获得指定元素的子元素节点      //兼容性良好 

    4、firstChild    获取该节点的第一个子节点    //ie 6 7 8获取指定节点的第一个子元素节点 高级浏览器获取第一个子节点,不排除文本节点

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    
    var div1=document.getElementById("div1");
    console.log(div1.firstChild);    //#text  第一个文本节点,也可以说是空格

     兼容方法:

    var 第一个子节点=节点.firstElementChild || 节点.firstChild;

    5、lastChild    获取该节点的最后一个子节点    //ie 6 7 8获取元素的最后一个子元素节点  高级浏览器获取最后一个子节点,不排除文本节点

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    
    var div1=document.getElementById("div1");
    console.log(div1.lastChild);    //#text  最后一个文本节点,也可以说是空格

     兼容方法:

    var 最后一个子元素节点=节点.lastElementChild || 节点.lastChild;

    6、nextsibling    获取该节点的下一个兄弟节点     //ie 6 7 8获得下一个元素节点   高级浏览器获得下一个节点,不排除文本节点    

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    var p=document.getElementById("jintian");
    console.log(p.nextSibling);    //#text

     兼容方法:

    下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling

    7、previoursSibling     获取该节点的上一个兄弟节点        //ie 6 7 8获得上一个元素节点   高级浏览器获得上一个节点,不排除文本节点    

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>

      var p=document.getElementById("mingtian");
      console.log(p.previoursSibling); //#text

     

     兼容方法:

    上一个兄弟节点=节点.previousElementSibling || 节点.previousSibling

    8、自定义siblings()方法

    function siblings(idName){
           var element=document.getElementById(idName);
           var eleList=element.parentNode.children;
           var eleArr=new Array();
           for(var i=0;i<eleList.length;i++){
                if(eleList[i]!==element){
                    eleArr.push(eleList[i]);
                }
            }
            return eleArr;
        }

    9、nodeType  节点的类型   9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    var div1=document.getElementById("div1");
        var son=div1.childNodes;
        for(var i=0;i<son.length;i++){
        console.log(son[i].nodeType);  //  3 1 3 1 3
    }

    10、nodeValue   text节点或Comment节点的文本内容

    <div id="div1">
        <!-- 这里是注释 -->
    </div>
    
    var div1=document.getElementById("div1");
        var son=div1.childNodes;
        for(var i=0;i<son.length;i++){
        console.log(son[i].nodeValue);     文本节点为空 所以打印出“” 这里是注释 “” 
      }

     如果你想获取指定节点的文本:

    指定元素节点.childNodes[0].nodeValue

    11、nodeName    元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示      //兼容性好

    <p id="jintian" class="jintian">今天是星期四</p>
    
    var jintian=document.getElementById("jintian");
    alert(jintian.nodeName);   //P

    12、childElementCount       子元素节点的个数        //ie 6 7 8不支持 高级浏览器支持

    <div id="div1">
        <p id="jintian" class="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    
    var div1=document.getElementById("div1");
    console.log(div1.childElementCount);    //2

     替代方法:

     var ul=document.getElementById("ul");
     alert(ul.children.length);

    六、javascript操作html属性

    1、属性的读取,注意,有几个html属性名称在javascript中是保留字,因此会有些许不同,比如class,label标签中的for,相应的可以替换成className,htmlFor。

    <p id="xu" class="xulinjun">my name is xu</p>
    
    var xu=document.getElementById("xu");
    alert(xu.className);  //xulinjun   如果此处写成xu.class 就会弹出undefined

    2、属性的设置,此处同样注意保留字。

    <img src="123.png" alt="" id="img">
    
    var img=document.getElementById("img");
    img.onclick=function(){
        this.src="456.png";   //通过点击改变图片的路径,小图变大图
    }

    非标注html属性

    3、getAttribute()    获取属性,不必在意保留字

    <p id="jintian" class="xixi">今天是星期四</p>
    
    var jinian=document.getElementById("jintian");
    alert(jintian.getAttribute("class"));   //弹出xixi

    4、setAttribute()    设置属性,不必在意保留字

    <p id="jintian" class="xixi">今天是星期四</p>
    
    var jinian=document.getElementById("jintian");
    jintian.setAttribute("class","lala");
    alert(jintian.getAttribute("class"));    //弹出lala

    七、元素的内容

    1、innerText     从起始位置到终止位置的内容, 但它去除Html标签   注意火狐浏览器不支持innerText

    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    var div1=document.getElementById("div1");
    console.log(div1.innerText);  今天是星期四 明天是星期五   

    2、innerHTML   innerHTML与innerText的区别,就是对HTML代码的输出方式Text不会输出HTML代码

    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    var div1=document.getElementById("div1");
    console.log(div1.innerHTML);    //<p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p>

    八、创建、插入、删除节点

    1、document.createTextNode()   创建一个文本节点

    <p id="jintian">今天是星期四</p>
    
    var jintian=document.getElementById("jintian");
    var newP=document.createTextNode("后天是星期六");
    jintian.appendChild(newP);    //今天是星期四后天是星期六

    2、document.createElement    创建一个元素节点

    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    
    var div1=document.getElementById("div1");
    var newP=document.createElement("p");
    newP.innerHTML="我就是一个新建的p";
    div1.appendChild(newP);
    
    //现在html变成了
    
    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
        <p>我就是一个新建的p</p>
    </div>

    3、appendChild()     将一个节点插入到调用节点的最后面  实例如上

    4、insertBefore()   接收两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,就像appendChild一样放在最后面,调用者也为父节点。

    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    var div1=document.getElementById("div1");
    var mingtian=document.getElementById("mingtian");
    var newP=document.createElement("p");
    newP.innerHTML="我就是一个新建的p";
    div1.insertBefore(newP,mingtian);
    
    //现在html变成了
    
    <div id="div1">
            <p id="jintian">今天是星期四</p>
            <p>我就是一个新建的p</p>
         <
    p id="mingtian">明天是星期五</p> </div>

    5、自定义insertAfter

    function insertAfter(newElement,targetElement){  
        var parent=targetElement.parentNode;  
        if(parent.lastChild==targetElement){  
            parent.appendChild(newElement);  
        }else{  
            parent.insertBefore(newElement,targetElement.nextSibling);  
        }  
    } 

    6、removeChild()   由父元素调用,删除一个子节点,注意是直接父元素调用,删除子节点才有效,删除孙子元素就没有效果了。

    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    var div1=document.getElementById("div1");
    var mingtian=document.getElementById("mingtian");
    div1.removeChild(document.getElementById("mingtian"));
    
    //现在html变成了
    
    <div id="div1">
        <p id="jintian">今天是星期四</p>
    </div>

     7、replaceChild()   用一个新节点替代一个旧节点  由父节点调用,接收两个参数,第一个为新节点,第二个为旧节点。

    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p id="mingtian">明天是星期五</p>
    </div>
    
    var div1=document.getElementById("div1");
    var mingtian=document.getElementById("mingtian");
    var newP=document.createElement("p");
    newP.innerHTML="我就是一个新建的p";
    div1.replaceChild(newP,mingtian);
    
    //现在结构变成了
    
    <div id="div1">
        <p id="jintian">今天是星期四</p>
        <p>我就是一个新建的p</p>
    </div>

    九、javascript操作css

    1、style  通过元素的style属性可以随意读取和设置元素的CSS样式

    <p id="tianqi" style="background-color:yellowgreen;">今天天气不错啊~</p>
    
    var p=document.getElementById("tianqi");
    console.log(p.style.backgroundColor);   //rgb(154, 205, 50)
    p.style.backgroundColor="purple";        //背景颜色变成了紫色

    注意:style只能获取行内样式。

  • 相关阅读:
    Ubuntu中安装XAMPP出错的解决方法
    sudo 后不用输入密码的配置
    javascript鼠标双击时触发事件大全
    PHP空值判断
    40音乐海报的创意例子
    35个令人印象深刻的创意404错误页面设计
    35个高分辨率创意苹果桌面壁纸
    38惊人的HD(高清晰度)壁纸七彩的例子
    25精心设计的联系页面例子
    pgpoolII中对 setsockopt 的利用
  • 原文地址:https://www.cnblogs.com/xlj-code/p/6278673.html
Copyright © 2011-2022 走看看