javascript-ife笔记-javascript和树

本文主要是介绍javascript-ife笔记-javascript和树，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、二叉树

二叉树遍历：

（1）前序遍历（DLR），首先访问根结点，然后遍历左子树，最后遍历右子树。简记根-左-右。（2）中序遍历（LDR），首先遍历左子树，然后访问根结点，最后遍历右子树。简记左-根-右。（3）后序遍历（LRD），首先遍历左子树，然后遍历右子树，最后访问根结点。简记左-右-根。 

前序遍历：

结果为：ABDHIEJCFKG

算法为：

function preOrder(node){if(!(node==null)){data.push(node);preOrder(node.firstElementChild);preOrder(node.lastElementChild);}
}

中序遍历：

结果为：HDIBEJAFKCG

算法：

function inOrder(node){if(!(node==null)){inOrder(node.firstElementChild);data.push(node);inOrder(node.lastElementChild);}
}

后序遍历：

结果为：HIDJEBKFGCA

算法：

function postOrder(node){if(!(node==null)){postOrder(node.firstElementChild);postOrder(node.lastElementChild);data.push(node);}
}

DOM小结：

1、Element.children:（只读）返回所有一级子元素(Element类型的)。

2、Element.className:返回该元素的class名字。

3、Element.firstElementChild：（只读）返回第一个子元素(Element类型，不存在返回null)。

4、Element.id：返回该元素的id。

5、Element.innerHTML：返回该元素内的所有内容。

6、Element.lastElementChild：只读）返回最后一个子元素(Element类型，不存在返回null)。

7、Element.nextElementSibling：（只读）返回当前元素在其父元素的子元素中的后一个元素节点，如果该元素已经是最后一个元素节点，返回null。

8、Element.outerHTML：获取该元素及其后代的HTML文本。（innerHTML不包含该元素本身）

9、Element.previousElementSibling：（只读）返回该元素上一个兄弟节点，不存在返回null。

10、Element.tagName：（只读）返回该元素的标签名。

查看任务二十二的源代码：

See the Pen ife_baidu-任务二十二-JavaScript和树(一) by tombflylee (@tombflylee) onCodePen.

2、多叉树：

深度优先遍历、广度优先遍历

1、深度优先遍历：

（1）访问顶点v；

（2）从v的未被访问的邻接点中选取一个顶点w，从w出发进行深度优先遍历；

（3）重复上述两步，直至图中所有和v有路径相通的顶点都被访问到。

例子：

遍历结果

算法：

function traverseDF(node){for(var i=0;i<node.children.length;i++){traverseDF(node.children[i]);}data.push(node);
}

2、广度优先遍历：

结果：

算法：

function traverseBF(node){
    if(node){data.push(node);traverseBF(node.nextElementSibling);node=data[index++];traverseBF(node.firstElementChild);}
}

DOM小结：很多DOM类型都从Node类型继承

1、Node.childNodes：（只读）返回所有子节点的集合（包括Element类型和Text类型。）

2、Node.firstChild：（只读）返回第一个子节点，即childNodes的第一个节点。

上述两者childNodes[0]和firstChild都受空格等的影响。

<p id="para-01"><span>First span</span>
</p><script type="text/javascript">var p01 = document.getElementById('para-01');alert(p01.firstChild.nodeName)提示框将显示 '#text'
</script>
<p id="para-01"><span>First span</span></p>这样写不影响<script type="text/javascript">var p01 = document.getElementById('para-01');alert(p01.firstChild.nodeName)
</script>

3、Node.lastChild：（只读）返回最后一个子节点。

4、Node.nodeName：（只读）返回节点名称（如果是Element类型，返回Element.tagName；如果是Text类型，返回#text）

5、Node.nodeValue：获取或设置当前节点的值（如果是Element类型，返回null；如果是Text类型，返回文本节点的内容）

注意：在使用firstChild.nodeValue时，返回的字符会包含很多空白字符，

     所以firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g,"")

6、Node.textContent：返回或设置一个节点的文本内容。

	（innerText是IE引用的，没有textContent好）

//   <div id="divA">This is <span>some</span> text</div>// 获得文本内容:
var text = document.getElementById("divA").textContent;
//"This is some text".// 设置文本内容:
document.getElementById("divA").textContent = "This is some text";
//   <div id="divA">This is some text</div>

查看任务二十三的源代码：
See the Pen ife_baidu-任务二十三-JavaScript和树(二) by tombflylee (@tombflylee) on CodePen.

这篇关于javascript-ife笔记-javascript和树的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---