如下可以得到第一个li，在first变量里。
$("a")click(function(){
var first = $(this)parent()next()find("li")first();
})节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）三个基础属性
（1）元素节点---nodeType为1
（2）属性节点---nodeName为2
（3）文本节点---nodeValue为3 （文本节点包含文字、空格、换行等）
2、节点的层级
DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点
（1）根节点：<html>就是根节点，有且只有一个
（2）父节点：一个节点的上级节点
（3）子节点：一个节点的下级节点
（4）兄弟节点：具有相同父节点的节点
二、节点 *** 作
1、获取父节点
elementparentNode
2、获取子节点
（1）elementchildNodes：获得的是当前元素的所有子节点的集合（所有类型的子节点）
（2）elementchildren：是一个可读的属性，返回所有子元素节点
（3）firstChild：获取第一个子节点
（4）lastChild：获取最后一个子节点
（5）firstElementChild：获取第一个元素子节点
（6）lastElementChild：获取最后一个子元素节点
3、获取兄弟节点
（1）nextSibling：获取下一个兄弟节点
（2）previousSibling：获取上一个兄弟节点
（3）nextElementSibling：获取下一个兄弟元素(标签)节点
（4）previousElementSibling：获取前一个兄弟元素节点
<body>
<div class="demo">
<div class="box">
<h2>一二三四五</h2>
<span class="child">上山打老虎</span>
<p>注意！（保护国家保护动物）</p>
</div>
</div>
<div>
<ul>
<li id="l1">红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
<li>西游记</li>
</ul>
</div>
<script>
var child = documentquerySelector('child')
consolelog(childparentNode);
var ul = documentquerySelector('ul');
var lis = ulquerySelectorAll('li');
consolelog(lis);
consolelog("通过childNodes获得的子节点",ulchildNodes);
consolelog("children",ulchildren);
consolelog("ul的子节点",ulchildNodes);
consolelog("ul第一个子节点的类型：",ulchildNodes[0]nodeType);
consolelog("ul的第二个字节点类型：",ulchildNodes[1]nodeType);//1是元素，也叫标签
consolelog("ul的第一个子节点",ulfirstChild);
consolelog("ul的最后一个子节点：",ullastChild);
consolelog("ul的第一个子元素节点",ulfirstElementChild)
consolelog("ul的最后一个子元素节点",ullastElementChild)
var span = documentquerySelector('child');
consolelog("span的兄弟节点",spannextSiblingnextSibling)
consolelog("span的前一个兄弟节点",spanpreviousElementSibling)
</script>
</body>
登录后复制

4、创建节点
（1）doumentwrite():若页面加载完毕,再次调用该方法导致页面重绘
（2）elementinnerHTML：将节点加入到元素中,导致页面部分重绘
（3）documentcreateElement()：创建节点结构清晰、效率不高
5、添加和删除节点
（1）appendChild()：将节点添加到指定父节点的已有子节点的末尾
（2）insertBefore()：将节点添加到指定父节点的已有子节点的前面
（3）removeChild(child)：删除一个指定的节点。返回值为删除的节点
6、克隆节点
cloneNode(true/false)：复制节点
（1）true：深拷贝,复制节点本身和所有子节点
（2）false(或空)：浅拷贝,只复制节点本身这个是我用DELPHI获取的 有些变量的多余的 这里只是整个过程的一部分 不过可以回答你的问题了
procedure TfrmTestChapterGet_Source;
var
i: Integer;
TestSBC: TTestSBC;
lblname, pnlname, sSource, imgsrcListName: string;
imgBgName:string;
j:integer;
Str:string;
RootNode:IXMLNode;
begin
selfxmldcmnt1Active:=False;
selfxmldcmnt1XMLText:='<xml version="10" encoding="GB2312" >'+
'<fill version="10">'+
'<Source>'+
'<SrcID>9</SrcID>'+
'<Source>章节练习</Source>'+
'</Source>'+
'<Source>'+
'<SrcID>6</SrcID>'+
'<Source>高频考点</Source>'+
'</Source>'+
'<Source>'+
'<SrcID>12</SrcID>'+
'<Source>考前自测</Source>'+
'</Source>'+
'<Source>'+
'<SrcID>8</SrcID>'+
'<Source>易错与避错考题</Source>'+
'</Source>'+
'</fill>';
// selfxmldcmnt1XMLText:=RecXml;
selfxmldcmnt1Active:=true;
RootNode:=selfxmldcmnt1DocumentElement; //用TXMLDocument来解析
SetLength(FTestSource,RootNodeChildNodesCount);
for i := 0 to RootNodeChildNodesCount - 1 do //对模块进行分解
begin
for j := 0 to RootNodeChildNodes[i]ChildNodesCount- 1 do //取对应模块的数据；
begin
if j=0 then //这里是为了显示能够区分，在中间加了逗号”,“；
begin
Str:=VarToStr(RootNodeChildNodes[i]ChildNodes[j]Text);
FTestSource[i]SrcID:=StrToInt(Str);
end else
begin
FTestSource[i]Source:=VarToStr(RootNodeChildNodes[i]ChildNodes[j]Text);
end;
end;
end;获取父节点名称：
{PELabel id="取得节点名称" nodeId="{PELabel id="得到父栏目ID" nodeId="@RequestInt_Id" /}" /}
由于子栏目数量的不唯一性，相关标签需要做重新修改才可以调用！以上标签可能根据版本不同，标签名称有所差异，具体请在后台 系统设置 模版标签管理 标签管理，查找相应标签！xpath获取同级节点
XPath轴(XPath Axes)可定义某个相对于当前节点的节点集：
1、child 选取当前节点的所有子元素
2、parent 选取当前节点的父节点
3、descendant 选取当前节点的所有后代元素（子、孙等）
4、ancestor 选取当前节点的所有先辈（父、祖父等）
5、descendant-or-self 选取当前节点的所有后代元素（子、孙等）以及当前节点本身
6、ancestor-or-self 选取当前节点的所有先辈（父、祖父等）以及当前节点本身
7、preceding-sibling 选取当前节点之前的所有同级节点
8、following-sibling 选取当前节点之后的所有同级节点
9、preceding 选取文档中当前节点的开始标签之前的所有节点
10、following 选取文档中当前节点的结束标签之后的所有节点
11、self 选取当前节点
12、attribute 选取当前节点的所有属性
13、namespace 选取当前节点的所有命名空间节点
如：要定位当前td同级后的一个td
//td[='text']/following-sibling::td1）一共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）自定义属性
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）