用Dom遍历网页结点

最新推荐文章于 2023-03-08 08:32:28 发布

besily

最新推荐文章于 2023-03-08 08:32:28 发布

阅读量620

点赞数

分类专栏： js 文章标签： function null list go class html

js 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

如何用Js准确定位网页结点？估计大多数人会用document.getElemtById或者document.getElementByTagName;
以上两个方法确实没错，但是非常的笨重。因为你必须知道你要查找的结点的ID或者Name.但是有时候你不一定能知道这些ID或者Name,那该怎么办？

答案是使用DOM的 children,parents和siblings
看一下下面的代码：

<body>
   <h1>Heading</h1>
   <p>Paragraph</p>
   <h2>Subheading</h2>
   <ul id="eventsList">
     <li>List 1</li>
     <li>List 2</li>
     <li><a href="http://www.google.com">Linked List Item</a></li>
     <li>List 4</li>
   </ul>
   <p>Paragraph</p>
   <p>Paragraph</p>
</body>
h1,h2,ul和p就是siblings，Li就是ul的children,<A>就是第三个<li>的children,是个大家庭。
所有的html内的东东，包括文本，链接，文字都是一个node（节点），node无处不在。

node有好多属性，最重要的一个属性就是nodeType,nodeType包括element, attribute, comment, text一共有12种，爽歪歪阿。在这个例子中，只取1和3,1表示element node,3表示Text node。

另外一个属性nodeName,如果是element的话，就显示element的名字，如果是text的话，那就是#text；检测名称的语句：if(obj.nodeName.toLowerCase()=='li'){};

nodeValue是最后一个属性element 节点为null,text节点就是text文本的内容。以下语句是设置text节点的内容：
document.getElementsByTagName('p')[0].firstChild.nodeValue='Hello World';因为Text也是个节点，所以使用firstChild属性，也可以写成document.getElementsByTagName('p')[0].childNodes[0].nodeValue='Hello World';
同理可得：yourElement.lastChild 等价于 yourElement.childNodes[yourElement.childNodes.length-1]

从孩子节点到父亲节点：
<ul id="eventsList">
   <li>List</li>
   <li>List</li>
   <li>
     <a id="linkedItem" href="http://www.google.com">
       Linked List Item
     </a>
   </li>
   <li>List</li>
</ul>

var myLinkItem=document.getElementById('linkedItem');
alert(myLinkItem.parentNode.nodeName);
得到的结果是<li>

var myLinkItem = document.getElementById('linkedItem');
var parentElm = myLinkItem.parentNode;
while(!parentElm.className != 'dynamic' && parentElm != 'document.body')
{
parentElm=parentElm.parentNode;
}
alert(parentElm);
以上代码查找父亲节点，直到class为dynamic或者搜索到body为止

兄弟节点遍历代码：

window.οnlοad=function()
...{
   var myLinkItem=document.getElementById('linkedItem');
   var first=firstSibling(myLinkItem.parentNode);
   var last=lastSibling(myLinkItem.parentNode);
   alert(getTextContent(first));
   alert(getTextContent(last));
}
function lastSibling(node)...{
   var tempObj=node.parentNode.lastChild;
   while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
   ...{
     tempObj=tempObj.previousSibling;
   }
   return (tempObj.nodeType==1)?tempObj:false;
}
function firstSibling(node)
...{
   var tempObj=node.parentNode.firstChild;
   while(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
   ...{
     tempObj=tempObj.nextSibling;
   }
   return (tempObj.nodeType==1)?tempObj:false;
}
function getTextContent(node)
...{
   return node.firstChild.nodeValue;
}
哈哈，要注意不要跑过头了，注意兄弟节点的边界。还有注意检查nodeType。

设置元素属性：有两种方法。
方法一：

var firstLink=document.getElementsByTagName('a')[0];
if(firstLink.href=='search.html')
...{
firstLink.href='http://www.google.com';
}
var mainImage=document.getElementById('nav').getElementsByTagName('img')[0];
mainImage.src='dynamiclogo.gif';
mainImage.alt='Generico Corporation - We do generic stuff';
mainImage.title='Go back to Home';
方法二：

var firstLink=document.getElementsByTagName('a')[0];
if(firstLink.getAttribute('href') =='search.html')
...{
firstLink.setAttribute('href') ='http://www.google.com';
}
var mainImage=document.getElementById('nav').getElementsByTagName ('img')[0];
mainImage.setAttribute('src') ='dynamiclogo.gif';
mainImage.getAttribute('alt') ='Generico Corporation - We do generic stuff';
mainImage.getAttribute('title') ='Go back to Home';
方法二使用getAttribute和setAttribute，兼容性比较好。