Javascript和Jquery对DOM节点的文本创建、获取及操

javascript和jquery获取,添加,删除等操作DOM节点,文本及属性
如:JS:atteibutes/firstChild/appendChild()/getAttribute()  JQ:
attr()/next()/siblings()/append()/remove()等

一,Javascript  DOM节点及文本的获取,操作

<! - 属性操作 - >
1.nodeName   节点名称
2.nodeValue    设置或返回指定节点的节点值
3.parentNode  以节点对象的形式返回指定节点的父节点
4.childNodes 节点的子节点集合
5.attributes 属性节点
6.nodeType 返回以数字值返回指定节点的节点类型节点是元素节点返回1.如果节点是属性节点返回2
7.firstChild 返回某个节点内第一个节点(处于同一树层级)DOM节点之间不能有空格
8.lastChild 返回某节点内部后一个节点(处于同一树层级)DOM节点之间不能有空格
9.nextSibling 报道查看某个节点下一个节点(处于同一树层级)DOM节点之间不能有空格
10.previousSibling 报道查看某个节点上一个节点同一树层级)DOM节点之间不能有空格
11.innerHTML   获取HTML

12.innerText  获取文本

<! - DOM元素节点,文本获取,操作 - >

13.createElement() 创建DOM节点
14.createTextNode() 创建文本节点
15.appendChild() 插入子节点/文本(最后)
16.removeChild() 删除子节点/文本
17.replaceChild(newNode,y) 方法用于替换节点x.replaceChild(newNode, y)
18.replaceData(offset,length,string) 方法用于替换文本节点中的数据
19.insertBefore(newNode,y) 方法用于在指定的子节点之前插入节点.x.insertBefore(newNode,y);
x:父节点y:子节点
20.insertData(offset,string) 方法将数据插入已有的文本节点中
21.cloneNode() 方法有一个参数(真或假)。该参数指示被复制的节点是否包括原节点的所有属性和子节点

<! - DOM属性节点,文本获取,操作 - >
22.getAttribute() 获取属性
23.removeAttribute() 删除属性

24. setAttribute() 设置属性

25. removeAttributeNode() 删除指定的属性,并以Attr节点对象返回被删除的属性

<! - DOM中添加注释 - >

26.createComment() 方法创建一个新的注释节点

代码演示及详细解释:
<!DOCTYPE html> <html> <head> <title> DOM节点及文本的获取,操作</title> </head> <body>
<ul id =“list”><li class =“a”>第一列<b>1b1</b><b>1b2</b>
</li><li>第二列<b>b1</b></li><li>第三列</li><li>第四列<b>
4b1</b><b>4b2</b><b>4b3</b></li><li>第五列</li></ul> <a href =“javascript :;”
class =“aOne”rel =“www”title =“链接”>链接:此处有要被替换的文字</a> <br> <a
href="javascript:;">链接2 </a> <ul><li>2第一列</li></ul></body> <script type
="text/javascript"> var aDom = document.getElementsByTagName('a')[0]; var liDom
= document.getElementsByTagName('li')[1]; var ulDom =
document.getElementsByTagName('ul')[0]; var ulDomT =
document.getElementsByTagName('ul')[1]; liDom.nodeName //获取此节点名称结果为:'LI' //
nodeValue获取 liDom.childNodes [0] .nodeValue //返回指定节点的节点值结果:'第一列'
liDom.childNodes [1] .childNodes [0] .nodeValue //因为是节点计算要获取'2b1'要这样写 //
nodeValue设置 liDom.childNodes [0] .nodeValue ='修改后第二列';
//此时DOM中第一个li的第一个文本节点已变为'修改后第二列' liDom.parentNode;
//以节点对象的形式返回指定节点的父节点结果:整个ul的DOM liDom.childNodes; //节点的子节点集合结果为:[text,b,b]
liDom.childNodes [1]; //结果为:'<b> 2b1 </ b>' aDom.attributes;
//返回节点的属性集合结果为:{0:href,1:class,2:rel,3:title,length:4} aDom.attributes [1];
//结果为:class =“aOne” aDom.nodeType; //返回以数字值返回指定节点的节点类型节点是元素节点返回1结果为:1
aDom.attributes [1] .nodeType; //如果节点是属性节点返回2结果为:2 liDom.firstChild;
//返回节点内第一个节点(处于同一树层级)DOM节点之间不能有空格 liDom.lastChild;
//处理同一树层级DOM节点之间不能有空格结果为:'<b> 2b1 </ b>' liDom.nextSibling;
//返回某节点下一个节点(处于同一树层级)DOM节点之间不能有空格结果为:<li>第三列</ li> liDom.previousSibling;
//返回某节点上一个节点(处于同一树层级)DOM节点之间不能有空格结果为:上一个节点DOM liDom.innerHTML;
//获取html结果为:第二列<b> 2b1 </ b> liDom.innerText; //获取文本结果为:第二列2b1 var newDom =
document.createElement('li'); //创建DOM节点 var newDomT =
document.createElement('li'); //创建DOM节点 var newText =
document.createTextNode('第六列'); //创建文本节点 // appendChild()插入子节点/文本(最后)
ulDom.appendChild(newDom); ulDom.lastChild.appendChild(newText);
//页面中刚添加的li中现在已经添加了'第六列'的DOM元素节点
//注意:当添加页面有已有元素时,原元素会被移除(类似剪切),解决方法可以用cloneNode()下面会介绍 var node =
ulDom.lastChild; //第一个UL中最后一个 ulDomT.appendChild(节点);
//结果是:第一个ul中的第六列消失,第二个ul中最后添加文本为第六列的li //
insertBefore(newNode,指向节点名称)方法用于在指定的子节点之前插入节点
ulDom.insertBefore(newDomT,ulDom.lastChild);
ulDomT.removeChild(ulDomT.lastChild); //删除子节点/文本结果为:第二个ul中最后li被删除 //
replaceChild(newNode,oldnode)用新节点换某个子节点。
ulDomT.replaceChild(newDom,ulDomT.childNodes [0]);
//用新建DOM节点替换old节点x.replaceChild(newNode,oldnode);
ulDomT.replaceChild(ulDom.lastChild,ulDomT.childNodes [0]);
//由于替换的DOM节点随之消失(类似剪切) // replaceData(offset,length,tring)方法用于替换文本节点中的数据。
aDom.childNodes [0] .replaceData(1,2, “我要替换文字哟”); //
insertData(offset,string)方法将数据插入已有的文本节点中。 ulDom.firstChild.childNodes [0]
.insertData(0,'(添加部分)'); //
cloneNode()方法有一个参数(true或false)。该参数指示被复制的节点是否包括原节点的所有属性和子节点。 var cloneDom =
ulDom.firstChild.cloneNode(true); //原有的不会消失 ulDom.appendChild(cloneDom);
//此时第一个ul中最后添加了一个liDOM // getAttribute()获取属性 liDom.getAttribute('class');
//结果为:b // removeAttribute()删除属性 liDom.removeAttribute('class');
//此时'liDom'的类属性已经被删除再获取类属性为null // setAttribute()设置属性
liDom.setAttribute('class','b'); //此时'liDom'添加了值为'b'的类属性再获取类属性时为b //
removeAttributeNode()删除指定的属性,并以Attr节点对象返回被删除的属性
ulDom.removeAttributeNode(ulDom.getAttributeNode("id")); //返回:id="list" //
createComment()方法创建一个新的注释节点。var var c=document.createComment('这是第一个ul');
//建立一条注释 document.body.insertBefore(c,ulDom); //添加注释 </script> </html>

二、JQuery   DOM节点及文本的获取,操作

1:jquery的对DOM节点的基本操作

    1)获取和设置HTML
        $('#id').html();    //()中没有值时为获取,有值时为设置   

    2)获取和设置文本(text)
        $('.class').text();  //()中没有值时为获取,有值时为设置  

    3)获取和设置value值
        $('input[name=uname]').val();  //()中没有值时为获取,有值时为设置  

    4)属性操作:获取,设置,删除
        $('#id').attr('属性名','属性值');   //()中只有属性名是为获取,有属性名+属性值为设置
        $('#id').removeAttr('属性名')  //删除属性

        $('checkbox').prop('checked',,ture/false);     //设置属性
         //对于本身就带有的固有属性,使用prop方法。
            //对于自定义的DOM属性,使用attr方法。



2.jquery对DOM节点的CSS样式操作

    1)获取、设置CSS样式
        $('#id').css('属性名','属性值');  // ()中只有属性名是为获取,有属性名+属性值为设置
        $('#id').css({


                width:'30px',
                height:'30px',


        }); // ()设置多个属性

     2) 添加、删除、切换、判断class
         $('#id').addClass('pad');  //添加class
         $('#id').removeClass('pad') //删除class


         $('#id').toggleClass('pad'); //切换class,有就删除。没有就添加
         $('#id').hasClass('pad'); //判断是否存在class命名

  3.获取偏移值及获取设置滚动值
     1)获取元素偏移量
        $('#id').offset().left  //获取元素左偏移量
        $('#id').offset().top //获取元素上偏移量


       2)获取position元素偏移量        $('#id').position().left  //获取position元素的左偏移量
        $('#id').position().top  //获取position元素的上偏移量
        
      3)获取和设置滚动值
        $('#id').scrollTop(); //()中没有值时为获取上滚动卷入值,有值时为设置上滚动卷入值
        $('$id').scrollLeft(); //()中没有值时为获取左滚动卷入值,有值时为设置左滚动卷入值


    4.DOM元素的获取有操作
       $('#id').parent();  //获取直系父级的节点
       $('#id').parents('节点'); 
//获取父级的节点,或一直向父级找,()为空时直到找到html节点,()有值时会找到设置的节点后会停止
       $('#id').parentsUntil('.class'); //获取#id 到 .class 之间的#id 的父级节点
       $('#id').children(); //()为空时获取#id 的所以直系子集,()不为空时,为获取条件,获取满足条件的子集
       $('#id').find('条件');//()不能为空,find会一直向子集(子集的子集···)寻找直到满足条件为止
       $('#id').siblings('条件');  //()为空时获取#id 所有同级节点,()有条件是获取满足条件的同级节点
       $('#id').next('条件'); //()为空是获取下一个同级Dom节点,()有条件时下一个同级Dom满足条件可以获取到,不满足获取不到
       $('#id').prev('条件');  //获取上一个同级Dom节点,用法和next相同
       $('#id').nextAll('条件');   //()为空是获取#id之后所有同级Dom节点,()有条件时获取之后所有同级Dom满足条件的
       $('#id').prevAll('条件');  //获取#id之后所有同级Dom节点,用法和next相同
       $('#id').nextUntil('.class');  //获取#id之后到.class之间的所有节点
       $('#id').prevUntil('.class'); //获取#id之前到.class之间的所有节点
       $('div').first(); //获取第一个div节点
       $('div').last();  //获取最后一个div节点
       $('div').eq(index); //获取第index+1个div节点 ,index为索引值从0开始
       $('div').filter('.class'); //获取所有类名为class的div节点
       $('div').not('.class'); //获取所有类名不为class的div节点

   5.添加、修改、删除DOM元素
     1) 添加Dom节点
       $('#id').append($('.appendDom'));   //在#id的最后添加.appendDom元素节点
       $('#id').prevpend($('appendDom')); //在#id的最开始添加.appendDom元素节点
       $('#id').after($('appendDom')); //在#id节点之前添加.appendDom元素节点
       $('#id').before($('appendDom')); //在#id节点之后添加.appendDom元素节点
       $('.appendDom').appendTo('#id'); //把.appendDom元素节点插入到#id节点的最后(内部)  
(和append效果相同)
       $('.appendDom').prevpendTo('#id'); //把.appendDom元素节点插入到#id节点的最开始(内部) 
(和prevpend效果相同)
       $('.appendDom').insertAfter('#id'); //把.appendDom元素节点插入到#id节点之后(同级)
(和after效果相同)
       $('.appendDom').insertBefore('#id'); //把.appendDom元素节点插入到#id节点之前(同级)
(和before效果相同)
       $('div').warp('<b></b>');  //使用b标签包裹所有的div节点,所有的div标签用一个b标签包裹
       $('div').warpInner('<b></b>'); //使用b标签包裹所有的div节点,每一个div标签都用一个b标签包裹

     2) 删除Dom节点
        $('div').remove('条件'); //删除元素,可以添加条件   连节点一起删除
        $('div').empty();  //清楚元素  遗留节点

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信