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

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() 方法创建一个新的注释节点

代码演示及详细解释：

 
 
 
	
 
 
第一列1b11b2 
第二列b1
第三列
第四列 4b14b24b3
第五列
 
链接：此处有要被替换的文字 
 
链接2  
2第一列
 
 
	

 

二、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').prepend($('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标签包裹所有的div节点，所有的div标签用一个b标签包裹
       $('div').warpInner(''); //使用b标签包裹所有的div节点，每一个div标签都用一个b标签包裹

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