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

posted @ 2017-01-12 16:09 asimpleday 阅读(245) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

asimpleday

DOM

公告