JS总结——DOM节点

本文详细介绍了DOM中最常见的三种节点类型:元素节点、文本节点和属性节点,并讲解了如何使用JavaScript访问和操作这些节点,包括创建、删除及修改节点的方法。

DOM节点

类型

最常用的有三种,分别是元素节点、文本节点以及属性节点。

元素节点:可以理解为HTML标签

属性节点:可以理解为html标签里的属性

文本节点:就是一对标签之间的内容。

文档节点:其实就是document


注意:

还有一个叫做空白文本节点的东西!!!(IE9以下没这个问题,其余浏览器都有)

如果在写html标签时,你使用了回车进行换行,它存在于上一个闭合标签到下一个开始标签。


获取节点

  1. getElementById (IE8使用时,name不要和id同名)

  2. getElementsByTagName (IE8不支持)

  3. getElementsByClassName(IE8不支持)


节点属性


1. nodeType

    元素节点 :nodeType == 1

    属性节点 :nodeType == 2

    文本节点 :nodeType == 3

    文档节点 :nodeType == 9   


2. nodeName

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 是属性的名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document


3. nodeValue

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是 文本自身

属性节点的 nodeValue 是 属性的值


访问节点


1. 访问子节点


childNodes


语法:

元素节点.childNodes


实例:

<div>
  javascript  
  <p>node</p>
  <div>jQuery</div>
  <h5>Bootstrap</h5>
</div>

var x=document.getElementsByTagName("div")[0].childNodes;
for(var i = 0; i < x.length; i++){
    document.write("第"+(i+1)+"个节点的值是:"+x[i].nodeValue+"<br  />"); 
    document.write("第"+(i+1)+"个节点的名称是:"+x[i].nodeName+"<br  />"); 
    document.write("第"+(i+1)+"个节点的属性是:"+x[i].nodeType+"<br  />");
    document.write("<br  />");
}


使用childNodes一定要注意处理空白节点!!!!

添加nodeType==1进行判断,只选择中元素节点。



children

使用children同样可以访问到子节点,而且不包括文本节点!!!

实例:

<ul id = "ul1">
    <li></li>
    <li></li>
</ul>

var oUl = document.getElementById("ul1");

alert(oUl.children.length);  // 2 



2. 访问父节点


parentNode


语法:

元素节点.parentNode


实例:

点击a标签,隐藏父元素。

<ul id = "ul1">
    <li>这是第一个 <a href = "#">隐藏</a> </li>
    <li>这是第二个 <a href = "#">隐藏</a> </li>
    <li>这是第三个 <a href = "#">隐藏</a> </li>
</ul>


var addA = document.getElementsByTagName('a');

for(var i = 0; i < addA.length; i++){

    addA[i].onclick = function (){
        this.parentNode.style.display = "none";
    };
}



3. 访问子节点首个和最后一个


语法:

首个

父节点.firstChild           IE6-8

父节点.firstElementChild    IE9+、现代浏览器   


最后一个

父节点.lastChild           IE6-8  

父节点.lastElementChild    IE9+、现代浏览器   



4. 访问兄弟节点


语法:

下一个

节点.nextSibling           IE6-8

节点.nextElementSibling    IE9+、现代浏览器   


前一个

节点.previousSibling           IE6-8  

节点.previousElementSibling    IE9+、现代浏览器   


DOM操作元素


操作属性


    getAttribute( "属性名",“属性值”)      获取 

    setAttribute( "属性名","属性值")      设置

    removeAttribute( "属性名","属性值")   删除


操作元素


1. 创建


语法:

createElement('标签名')             创建

父节点.appendChild(子节点)           追加到末尾处

父节点.insertBefore(子节点,在谁之前)  插入到指定位置

它们要配合起来用,才能在页面显示。


实例1:

点击按钮,添加li。

<input id = "btn1" type = "button" value = "创建">
<ul id = "ul1"></ul>

var oBtn = document.getElementById("btn1");
var  oUl = document.getElementById("ul1");

oBtn.onclick = function(){
    var oLi = document.createElement("li");

    oUl.appendChild(oLi);

}


实例2:

如果已有li,则通过insertBefore插入;
如果没有,则通过appendChild添加。

<input id = "btn1" type = "button" value = "创建">
<ul id = "ul1"></ul>

var oBtn = document.getElementById("btn1");
var  oUl = document.getElementById("ul1");

oBtn.onclick = function(){

    var oLi = document.createElement("li");
    var aLi = oUl.getElementByTagName("li");

    if(aLi.length > 0){
        oUl.insertBefore(oLi, aLi[0]);
    }else{
        oUl.appendChild(oLi);
    }
}


2. 删除


语法:

父节点.removeChild(子节点)


实例:

<ul id = "ul1">
    <li>这是第一个 <a href = "#">删除</a> </li>
    <li>这是第二个 <a href = "#">删除</a> </li>
    <li>这是第三个 <a href = "#">删除</a> </li>
</ul>

var aA = document.getElementsByTagName("a");
var oUl = document.getElementById("ul1");

for(var i = 0; i < aA.length; i++){
    aA[i].onclick = function(){
        oUl.removeChild(this.parentNode);
    }
}


文档碎片

ps:对现代浏览器来说,提高不了什么性能,反倒有可能负优化,仅作了解之用。


每次创建一个元素,不要急着马上把其直接添加到页面,因为添加元素太多的话,有可能需要渲染几次。

我们可以先把这些元素加到文档碎片当中,最后一次性加到页面中去。


实例:

var oUl = document。getElmentById("ul1");

//注意这里,创建文档碎片
var oFrag = document.createDocumentFragment();

for(var i = 0; i < 10000; i++){
    var oLi = document.createElement("li");

    //添加到文档碎片
    oFrag.appendChild(oLi);

//一次性添加完毕
oUl.append(oFrag);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值