获取节点的各种方法

    $('#box')prent()  //父节点

    $('#box')prents()  //所有父节点

    $('#box')children()  //全部子节点，此方法获取的是集合，可单个选取某一节点入$('#box')children('#text1')

    $('#box')prev()    //上一个兄弟节点

    $('#box')prevs()  //之前全部兄弟节点

    $('#box')next()    //下一个兄弟节点

    $('#box')nexts()  //之后所有兄弟节点

    $('#box')siblings() //所有兄弟节点,此方法获取的是集合，可单个选取某一节点入$('#box')siblings('#text2')

    $('#box')find('#text3')  //搜索所有段落中的后代节点

    $('box')eq(1) //如果有两个box类想选取第二个则可以用eq()来获取

    $("ul li")first(); // 选取ul li中匹配的第一个元素

    $("ul li")last(); // 选取ul li中匹配的最后一个元素

    $("ul li")slice(1, 4); // 选取第2 ~ 4个元素

var chils= schildNodes;  //得到s的全部子节点

var par=sparentNode;   //得到s的父节点

var ns=snextSbiling;   //获得s的下一个兄弟节点

var ps=spreviousSbiling;  //得到s的上一个兄弟节点

var fc=sfirstChild;   //获得s的第一个子节点

var lc=slastChile;   //获得s的最后一个子节点

1）一共12个节点类型

2）dom *** 作就是对节点进行 *** 作

3）节点的类型的获取方法notetype

4）ie9以上及chrome safari firefox 会将换行符当成节点

（1）静态获取

（2）返回带有指定ID的元素

var box1=documentgetElementById('box');

（1）根据标签名获取

（2）得到的是个数组

var div1=documentgetElementsByTagName('div')[0];

（1）根据类名获取元素

（2）动态获取

（3）得到的是一个数组

var box=documentgetElementsByClassName('box')[0];

（1）返回符合要求第一个元素

（2）通过css选择器来获取指定标签

（3）静态获取

（1）返回所有匹配元素

（2）根据css选择器来获取所有标签

（3）得到的是一个数组

获取兄弟节点

获取下一个兄弟标签

获取上一个兄弟节点

获取上一个兄弟标签

获取最后一个子节点

获取最后一个子标签

获取所有非标签类型的子节点

获取所有子标签节点

获取父节点

增加节点

var div=documentcreateElement('div');

在父元素的末尾，插入节点

在添加元素前，需要将元素先创建好

divappendChild(div);

修改指定子节点

删除指定子节点

在删除前需要先获取到被删除元素

divremoveChild(box);

删除当前节点

需要先获取到被删除的节点

divremove();

（1）设置ID

divid='box';

（2）设置class

divclassName='box';

（3）设置style

divstylewidth='10px';

（4）设置路径

imgsrc='/';

（5）自定义属性

不要把jQuery元素与Dom元素混淆，你这个s是jQuery对象，不能用Dom的方法去处理：

$(function () {

var s = $("span");

//alert(slength);

for( var i = 0; i < slength; i++ ){

var Str = seq(i)parent()next()text();

//也可以用 $(s[i])parent()next()text();

alert ("hello!");

alert (Str);

}

})

</script>

DOM-document object model： 文档对象模型：统一管理组织网页文档数据/网页标签

DOM模型数据 *** 作

JavaScript *** 作网页文档对象

*** 作标签增加、删除、查询

*** 作属性增加、删除、修改、查询

*** 作样式增加、删除、修改、查询

*** 作内容增加、删除、修改、查询

docement。getElementById（）根据标签的id属性提取一个标签对象

document。getElementsByTagName（）根据标签名称，提取多个标签对象

document。getElemensByName（）根据标签的name属性提取多个标签对象

document。getElementsByClassname（）根据标签的class属性提取多个标签对象。对于IE7不兼容，目前主流浏览器都可以 *** 作。

查询一个指定的标签

documentgetElementById()

documentgetElementsByName()

documentgetElementsByClassName()

documentgetElementsTagName()

查询这个标签的所有字标签：

（1）获取当前标签区域内的字标签数量

var 变量名称 = 区域标签名称。childElementCount;

（2）获取当前标签区域内的文本节点

var 变量名称 = 区域标签名称。childNodes;

（3）获取当前标签区域内的所有字标签；

var 变量名称 = 区域标签名称。Children；

（4）获取当前标间区域内的所有列表（存在兼容性问题）

var 变量名称 = 区域标签名称。childList;

（5）查询第一个子标签（兼容性问题）

var 变量名称 = 当前区域标签名称。firstChild

var 变量名称 = 当前区域标签名称。firstElementChild

（6）查询最后一个子标签（兼容性问题）

var 变量名称 = 当前区域标签名称。lastChild;

var 变量名称 = 当前区域标签名称。lastElementChild;

（7）指定获取子标签中的某个标签

var 变量名称1 = 当前所选中区域标签名称。children;

var 变量名称2 = 变量名称10（下标 *** 作）

查询这个标签的父标签：

（NodeparentNode返回当前节点的父节点）

查询这个标签的兄弟标签|同级标签：

var 变量名称1 = documnetgetElementById（“id属性”）

（获取它前面的同级标签）

var 变量名称2 = 变量名称1。previousSibling;

var 变量名称2 = 变量名称1nextSibling;

// var变量名称2 1 = 变量名称1previousElementSibling;// 兼容性问题

// var 变量名称3 =变量名称1nextElementSibling;// 兼容性问题

var _p1 = _tt2parent;

var _p2 = _tt2parentElement;

var _p3 = _tt2parentNode;

pass

/查询标签/

NodenodeName //返回节点名称，只读

NodenodeType //返回节点类型的常数值，只读

NodenodeValue //返回Text或Comment节点的文本值，只读

NodetextContent //返回当前节点和它的所有后代节点的文本内容，可读写

NodebaseURI //返回当前网页的绝对路径

NodeownerDocument //返回当前节点所在的顶层文档对象，即document

NodenextSibling //返回紧跟在当前节点后面的第一个兄弟节点

NodepreviousSibling //返回当前节点前面的、距离最近的一个兄弟节点

NodeparentNode //返回当前节点的父节点

NodeparentElement //返回当前节点的父Element节点

NodechildNodes //返回当前节点的所有子节点

NodefirstChild //返回当前节点的第一个子节点

NodelastChild //返回当前节点的最后一个子节点

//parentNode接口

Nodechildren //返回指定节点的所有Element子节点

NodefirstElementChild //返回当前节点的第一个Element子节点

NodelastElementChild //返回当前节点的最后一个Element子节点

NodechildElementCount //返回当前节点所有Element子节点的数目。

/

简单来看，两种，一种直接根据classname或者Id去获取对应的元素拿到你要的值；

第二种通过定位当前元素，然后通过获取兄弟节点的方式去获取，相关法请自行查阅资料，一查一大把，自己查出来的才能留下更深的印象

xpath_input_exp_mark = '//label[contains(text(), "文本内容")]//following-sibling::div[1]//input'

browserfind_element_by_xpath(xpath_input_exp_mark)

 表示当前节点的父节点

following-sibling::div[1] 表示当前节点的 兄弟节点 中的  第 1 个   div 标签

<div id="test">

<div></div>

<div></div>

</div>

<script>

function dom() {

var s= documentgetElementById("test");

var chils= schildNodes; //得到s的全部子节点

var par=sparentNode; //得到s的父节点

var ns=snextSbiling; //获得s的下一个兄弟节点

var ps=spreviousSbiling; //得到s的上一个兄弟节点

var fc=sfirstChild; //获得s的第一个子节点

var lc=slastChile; //获得s的最后一个子节点

}

</script>

以上就是关于获取节点的各种方法全部的内容，包括:获取节点的各种方法、js DOM *** 作、jquery 元素节点的获取等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！