javascript和jquery获取,添加,删除等操作DOM节点,文本及属性 如:JS:atteibutes/firstChild/appendChild()/getAttribute() JQ: attr()/next()/siblings()/append()/remove()等
<! - 属性操作 - >
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() 方法创建一个新的注释节点
代码演示及详细解释:
DOM节点及文本的获取,操作
- 第一列1b11b2
- 第二列b1
- 第三列
- 第四列 4b14b24b3
- 第五列
链接:此处有要被替换的文字
链接2
- 2第一列
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 //获取元素上偏移量
$('#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(); //清楚元素 遗留节点