JavaScript Tutorial/DOM Node/TreeWalker

Материал из Web эксперт
Перейти к: навигация, поиск

Get first child from TreeWalker (Firefox only)

<html>
<head>
<title>TreeWalker Example</title>
<script type="text/javascript">
   var walker = null;
   function makeList() {
       var oDiv = document.getElementById("div1");
       walker = document.createTreeWalker(oDiv, NodeFilter.SHOW_ELEMENT, null, false);
       var oOutput = document.getElementById("text1");
       oNode = walker.firstChild();
       while (oNode) {
           oOutput.value += oNode.tagName + "\n";
           oNode = walker.nextSibling();
       }
   }
</script>
</head>
<body>
<div id="div1">
    <P>Hello <b>World!</b></p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>
<textarea rows="10" cols="40" id="text1"></textarea><br />
<input type="button" value="Make List" onclick="makeList()" />
</body>
</html>


Get last child from TreeWalker

<html>
<head>
<title>TreeWalker Example</title>
<script type="text/javascript">
   var walker = null;
   function makeList() {
       var oDiv = document.getElementById("div1");
       walker = document.createTreeWalker(oDiv, NodeFilter.SHOW_ELEMENT, null, false);
       var oOutput = document.getElementById("text1");
       oNode = walker.lastChild();
       while (oNode) {
           oOutput.value += oNode.tagName + "\n";
           oNode = walker.nextSibling();
       }
   }
</script>
</head>
<body>
<div id="div1">
    <P>Hello <b>World!</b></p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>
<textarea rows="10" cols="40" id="text1"></textarea><br />
<input type="button" value="Make List" onclick="makeList()" />
</body>
</html>