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有路径相通的顶点都被访问到。

例子：

one

 ├── two

 │   ├── five

 │   └── six

 ├── three

 └── four

     └── seven

遍历结果

'five'

'six'

'two'

'three'

'seven'

'four'

'one'

 

算法：

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

2、广度优先遍历：

结果：

'one'

'two'

'three'

'four'

'five'

'six'

'seven'

算法：

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.