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

代码演示及详细解释：
<!DOCTYPE html> <html> <head> <title> DOM节点及文本的获取,操作</title> </head> <body>
<ul id =“list”><li class =“a”>第一列1b11b2
</li><li>第二列b1</li><li>第三列</li><li>第四列
4b14b24b3</li><li>第五列</li></ul> <a href =“javascript :;”
class =“aOne”rel =“www”title =“链接”>链接：此处有要被替换的文字</a> <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]; //结果为：' 2b1 ' 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节点之间不能有空格结果为：' 2b1 ' liDom.nextSibling;
//返回某节点下一个节点(处于同一树层级)DOM节点之间不能有空格结果为：<li>第三列</ li> liDom.previousSibling;
//返回某节点上一个节点(处于同一树层级)DOM节点之间不能有空格结果为：上一个节点DOM liDom.innerHTML;
//获取html结果为：第二列 2b1 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标签包裹所有的div节点，所有的div标签用一个b标签包裹
 $('div').warpInner(''); //使用b标签包裹所有的div节点，每一个div标签都用一个b标签包裹

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

热门工具换一换