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只能获取行内样式。

  • 相关阅读:
    uva 147 Dollars
    hdu 2069 Coin Change(完全背包)
    hdu 1708 Fibonacci String
    hdu 1568 Fibonacci
    hdu 1316 How Many Fibs?
    poj 1958 Strange Towers of Hanoi
    poj 3601Tower of Hanoi
    poj 3572 Hanoi Tower
    poj 1920 Towers of Hanoi
    筛选法——素数打表
  • 原文地址:https://www.cnblogs.com/xlj-code/p/6278673.html
Copyright © 2011-2022 走看看