From 03c201fbffd853ae814f06716da5bb67cbd1125e Mon Sep 17 00:00:00 2001 From: yinkanglong_lab Date: Tue, 9 Mar 2021 21:28:25 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- JavaScript/教程/DOM对象.md | 196 +++++++ JavaScript/教程/DOM对象三.md | 99 ++++ JavaScript/教程/DOM对象二——节点与遍历.md | 306 +++++++++++ JavaScript/教程/DOM简介.md | 155 ++++++ .../media/04d4031de63e53c5addd72792a6b60bd.png | Bin 0 -> 1520 bytes .../media/0b65a5c473aad3b4addc35c7f1e79e89.png | Bin 0 -> 178260 bytes .../media/32ed381aeecf1527d86e15829f232641.png | Bin 0 -> 101024 bytes .../media/41b23d86a383cc654da42e8957b33725.png | Bin 0 -> 46672 bytes .../media/75813153285d5ceb04c812e98c3b33a1.png | Bin 0 -> 36676 bytes .../media/a287b11ce3f0470882a238120c33a6bb.png | Bin 0 -> 1525 bytes JavaScript/教程/初识JavaScript.md | 162 ++++++ JavaScript/教程/对CSS的认识.md | 21 + JavaScript/教程/浏览器对象.md | 197 +++++++ JavaScript/教程/浏览器对象二.md | 39 ++ JavaScript/教程/程序控制结构和函数.md | 61 +++ JavaScript/教程/网页交互事件.md | 482 ++++++++++++++++++ 算法/补充/Bellman-Ford 单源最短路径算法.md | 138 +++++ 算法/补充/Dijkstra 单源最短路径算法.md | 196 +++++++ 算法/补充/Floyd-Warshall 全源最短路径算法.md | 135 +++++ 算法/补充/Kruskal 最小生成树算法.md | 168 ++++++ 算法/补充/Prim 最小生成树算法.md | 119 +++++ 算法/补充/P问题、NP问题和NPC问题.md | 22 + 算法/补充/TSP旅行商问题.md | 13 + .../media/028d88e6512c431a0680a0571d7a5675.png | Bin 0 -> 4681 bytes .../media/0c06f40a0719bebffc78d45c50d62e87.png | Bin 0 -> 20773 bytes .../media/0f264c0a5bbd1a01e78bda2fe8ab7db3.jpeg | Bin 0 -> 57648 bytes .../media/0fc9c39db519692eb9568c5aca664304.png | Bin 0 -> 9524 bytes .../media/1163371b1fee9f8427fd967986a18f51.jpeg | Bin 0 -> 4180 bytes .../media/14d56ddfaf928586b3fb2cfdbbd5ec94.jpeg | Bin 0 -> 11287 bytes .../media/160a163baff4ec1652cb64f7ff6a8577.jpeg | Bin 0 -> 9001 bytes .../media/20e94f670319849e1209cbe28e9ec5fe.png | Bin 0 -> 35521 bytes .../media/3206e454a556f7a6f021c384858fea1c.jpeg | Bin 0 -> 12959 bytes .../media/3e038dcf92495e474695b88e9fd3fde4.png | Bin 0 -> 15055 bytes .../media/3f6982193bf382027415cc1b54adaa97.gif | Bin 0 -> 6182 bytes .../media/44af8a5f1fc67d503c2ffa1f75c39f9c.jpeg | Bin 0 -> 11675 bytes .../media/45f694182b0df6b3ff26904265f1d5ac.png | Bin 0 -> 25547 bytes .../media/48554fff118a3129374906e0a905d876.jpeg | Bin 0 -> 8765 bytes .../media/5098aea20c34b2944158e6b0622954ff.jpeg | Bin 0 -> 18042 bytes .../media/51e409b11aa51c150090697429a953ed.gif | Bin 0 -> 263 bytes .../media/55e7000759c9f607cef012b78f7f8f09.png | Bin 0 -> 6760 bytes .../media/6b2a27583131a012247ddb212cddcf8b.png | Bin 0 -> 12713 bytes .../media/72b66188c7153bdaaeb94504bf6c8c65.jpeg | Bin 0 -> 5426 bytes .../media/7909dda678c34ea139bf725689e58761.png | Bin 0 -> 4322 bytes .../media/804412a0012e45a685217d5fd579fe61.jpeg | Bin 0 -> 5939 bytes .../media/9e5e619c58d10df405b618a18101fb78.jpeg | Bin 0 -> 11599 bytes .../media/9fd60a2c349a5f3382a3ac71344da53d.png | Bin 0 -> 2316 bytes .../media/a2a1f6233a2219cf362ac66675e74c89.png | Bin 0 -> 6667 bytes .../media/a3460bbcc926be103e406d581ac4612a.jpeg | Bin 0 -> 72014 bytes .../media/a623e7938bac06d833a52b042d1936a5.gif | Bin 0 -> 1619 bytes .../media/a69a98f4ac53d314d8fcfc0aa5fd005e.jpeg | Bin 0 -> 8882 bytes .../media/bc10e6800b78eac0fb9893134db87cca.png | Bin 0 -> 5068 bytes .../media/bddb24235aaf81ea66da626756cdfb48.jpeg | Bin 0 -> 8006 bytes .../media/c0fd7c31e5058884c3d218930d076182.jpeg | Bin 0 -> 7349 bytes .../media/ce1292f05670437ae4832b649bde8b8e.png | Bin 0 -> 59965 bytes .../media/da34421ea01b4c263b5bba06e67b4c39.gif | Bin 0 -> 130783 bytes .../media/da54c513dbc3845d6ba4009044bb16b7.jpeg | Bin 0 -> 5398 bytes .../media/e6bcbe8540508ae02a25725926ef375a.jpeg | Bin 0 -> 8911 bytes .../media/e94c6e5fc490453f5a2d31e744227bcc.png | Bin 0 -> 77938 bytes .../media/e95406c1bb140d86030be10b448f868f.jpeg | Bin 0 -> 9935 bytes .../media/f35f5beffbc44b89085a6241d5ba154e.jpeg | Bin 0 -> 11031 bytes .../media/f8d48508d06e4d604fbccd69b9c5eccf.png | Bin 0 -> 43178 bytes .../media/fa780b4a0df60501e6842a03fc6672f9.png | Bin 0 -> 12003 bytes 算法/补充/遗传算法详解.md | 273 ++++++++++ 63 files changed, 2782 insertions(+) create mode 100644 JavaScript/教程/DOM对象.md create mode 100644 JavaScript/教程/DOM对象三.md create mode 100644 JavaScript/教程/DOM对象二——节点与遍历.md create mode 100644 JavaScript/教程/DOM简介.md create mode 100644 JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png create mode 100644 JavaScript/教程/media/0b65a5c473aad3b4addc35c7f1e79e89.png create mode 100644 JavaScript/教程/media/32ed381aeecf1527d86e15829f232641.png create mode 100644 JavaScript/教程/media/41b23d86a383cc654da42e8957b33725.png create mode 100644 JavaScript/教程/media/75813153285d5ceb04c812e98c3b33a1.png create mode 100644 JavaScript/教程/media/a287b11ce3f0470882a238120c33a6bb.png create mode 100644 JavaScript/教程/初识JavaScript.md create mode 100644 JavaScript/教程/对CSS的认识.md create mode 100644 JavaScript/教程/浏览器对象.md create mode 100644 JavaScript/教程/浏览器对象二.md create mode 100644 JavaScript/教程/程序控制结构和函数.md create mode 100644 JavaScript/教程/网页交互事件.md create mode 100644 算法/补充/Bellman-Ford 单源最短路径算法.md create mode 100644 算法/补充/Dijkstra 单源最短路径算法.md create mode 100644 算法/补充/Floyd-Warshall 全源最短路径算法.md create mode 100644 算法/补充/Kruskal 最小生成树算法.md create mode 100644 算法/补充/Prim 最小生成树算法.md create mode 100644 算法/补充/P问题、NP问题和NPC问题.md create mode 100644 算法/补充/TSP旅行商问题.md create mode 100644 算法/补充/media/028d88e6512c431a0680a0571d7a5675.png create mode 100644 算法/补充/media/0c06f40a0719bebffc78d45c50d62e87.png create mode 100644 算法/补充/media/0f264c0a5bbd1a01e78bda2fe8ab7db3.jpeg create mode 100644 算法/补充/media/0fc9c39db519692eb9568c5aca664304.png create mode 100644 算法/补充/media/1163371b1fee9f8427fd967986a18f51.jpeg create mode 100644 算法/补充/media/14d56ddfaf928586b3fb2cfdbbd5ec94.jpeg create mode 100644 算法/补充/media/160a163baff4ec1652cb64f7ff6a8577.jpeg create mode 100644 算法/补充/media/20e94f670319849e1209cbe28e9ec5fe.png create mode 100644 算法/补充/media/3206e454a556f7a6f021c384858fea1c.jpeg create mode 100644 算法/补充/media/3e038dcf92495e474695b88e9fd3fde4.png create mode 100644 算法/补充/media/3f6982193bf382027415cc1b54adaa97.gif create mode 100644 算法/补充/media/44af8a5f1fc67d503c2ffa1f75c39f9c.jpeg create mode 100644 算法/补充/media/45f694182b0df6b3ff26904265f1d5ac.png create mode 100644 算法/补充/media/48554fff118a3129374906e0a905d876.jpeg create mode 100644 算法/补充/media/5098aea20c34b2944158e6b0622954ff.jpeg create mode 100644 算法/补充/media/51e409b11aa51c150090697429a953ed.gif create mode 100644 算法/补充/media/55e7000759c9f607cef012b78f7f8f09.png create mode 100644 算法/补充/media/6b2a27583131a012247ddb212cddcf8b.png create mode 100644 算法/补充/media/72b66188c7153bdaaeb94504bf6c8c65.jpeg create mode 100644 算法/补充/media/7909dda678c34ea139bf725689e58761.png create mode 100644 算法/补充/media/804412a0012e45a685217d5fd579fe61.jpeg create mode 100644 算法/补充/media/9e5e619c58d10df405b618a18101fb78.jpeg create mode 100644 算法/补充/media/9fd60a2c349a5f3382a3ac71344da53d.png create mode 100644 算法/补充/media/a2a1f6233a2219cf362ac66675e74c89.png create mode 100644 算法/补充/media/a3460bbcc926be103e406d581ac4612a.jpeg create mode 100644 算法/补充/media/a623e7938bac06d833a52b042d1936a5.gif create mode 100644 算法/补充/media/a69a98f4ac53d314d8fcfc0aa5fd005e.jpeg create mode 100644 算法/补充/media/bc10e6800b78eac0fb9893134db87cca.png create mode 100644 算法/补充/media/bddb24235aaf81ea66da626756cdfb48.jpeg create mode 100644 算法/补充/media/c0fd7c31e5058884c3d218930d076182.jpeg create mode 100644 算法/补充/media/ce1292f05670437ae4832b649bde8b8e.png create mode 100644 算法/补充/media/da34421ea01b4c263b5bba06e67b4c39.gif create mode 100644 算法/补充/media/da54c513dbc3845d6ba4009044bb16b7.jpeg create mode 100644 算法/补充/media/e6bcbe8540508ae02a25725926ef375a.jpeg create mode 100644 算法/补充/media/e94c6e5fc490453f5a2d31e744227bcc.png create mode 100644 算法/补充/media/e95406c1bb140d86030be10b448f868f.jpeg create mode 100644 算法/补充/media/f35f5beffbc44b89085a6241d5ba154e.jpeg create mode 100644 算法/补充/media/f8d48508d06e4d604fbccd69b9c5eccf.png create mode 100644 算法/补充/media/fa780b4a0df60501e6842a03fc6672f9.png create mode 100644 算法/补充/遗传算法详解.md diff --git a/JavaScript/教程/DOM对象.md b/JavaScript/教程/DOM对象.md new file mode 100644 index 00000000..caf583b0 --- /dev/null +++ b/JavaScript/教程/DOM对象.md @@ -0,0 +1,196 @@ +\>简介 + +\>\>document object +model：文档对象模型，将HTML文档呈现为带有元素、属性和文本的树结构，成为节点树 + +\>\>三种DOM结点; + +> 元素节点：\\\(tag) + +> 文本节点：\\\\ + +> 属性节点：元素属性\其中href即为元素的属性 + +![713150815405.png](media/41b23d86a383cc654da42e8957b33725.png) + +\>\>节点属性： + +> nodeName： + +> 1\. 元素节点的 nodeName 与标签名相同 + +> 2\. 属性节点的 nodeName 是属性的名称 + +> 3\. 文本节点的 nodeName 永远是\#text + +> 4\. 文档节点的 nodeName 永远是\>\#document + +> nodeType：节点类型1-\>元素节点；2-\>属性节点；3-\>文本节点 + +> nodeValue：节点值，元素节点返回null，属性节点返回属性值，文本节点返回文本内容 + +> 1\. 元素节点的 nodeValue 是 undefined 或 null + +> 2\. 文本节点的 nodeValue 是文本自身 + +> 3\. 属性节点的 nodeValue 是属性的值 + +> childNodes：返回子节点数组（只有元素节点有子节点） + +> firstChild：返回第一个子节点 + +> lastChild：返回最后一个子节点 + +> nextSibling：返回下一个兄弟节点 + +> previousSibling：返回节点的上一个兄弟节点 + +> parentNode：返回节点的父节点。 + +\>\>节点方法（是document对象的节点方法） + +> write()：写入内容到文档 + +> getElementBYId()：返回指定ID的元素 + +> getElementsByTagName()：返回带有制定标签名的所有元素（是一个数组） + +> get/setAttribute('key', 'value')：返回设置属性节点 + +\>\>其他元素的结点方法： + +| 节点方法 | 说明 | +|----------------------------------|--------------------------------| +| createElenment('tafName') | 创建元素节点 | +| createTextNode(‘text’) | 创建文本节点 | +| appendChild(o) | 在父节点末尾附加子节点 | +| reateDocumentFragment() | 创建文档片段 | +| removeChild(oP) | 删除节点 | +| replaceChild(newOp,targetOp) | 替换节点 | +| insertBefore(newOp,targerOp) | 已有的子节点前插入一个新的节点 | +| insertAfter(newOp,targetOp) | 已有的子节点后插入一个新的节点 | +| get/setAttribute('key', 'value') | 设置或得到属性节点 | +| clonNode(true/false) | 复制节点 | + +\>元素内容 + +> innerHTML（替换时包括其中的html标签） + +> innerText（替换时只有其中的文本内容） + +> 修改p标签的这两个值会得到不同的结果 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168) +[copy](http://blog.csdn.net/estom_yin/article/details/51898168) + +1. **\\** + +2. **\**JavaScript**\** + +3. **\**JavaScript**\** + +4. **\** + +5. **\** + +6. var inp = document.getElementById('inp'); + +7. inp.onclick = function(){ + +8. var ip = document.getElementsByTagName('p'); + +9. alert(ip[0].innerHTML); + +10. ip[0].innerHTML = "\hello\"; + +11. ip[1].innerText = "\hello\"; + +12. } + +13. **\** + +14. **\\** + +![713160404053.png](media/a287b11ce3f0470882a238120c33a6bb.png) + +![713160410069.png](media/04d4031de63e53c5addd72792a6b60bd.png) + +\>元素样式 + +> 方法： + +> style属性，能够创建新的属性并赋值 + +> className属性，只能改变标签的类属性，使用已经有的类来改变标签的属性 + +> 语法： + +> object.style.property = new style; + +> object.style.className = "class" + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168) +[copy](http://blog.csdn.net/estom_yin/article/details/51898168) + +1. **\\** + +2. **\**JavaScript**\** + +3. **\** + +4. **\** + +5. var inp = document.getElementById("inp"); + +6. inp.onclick = function () { + +7. var oh = document.getElementById("ih"); + +8. oh.style.color = "red"; + +9. oh.style.width = "300px"; + +10. oh.style.backgroundColor = "\#CCC"; + +11. } + +12. **\** + +13. **\\** + +\>显示和隐藏 + +> display = none 或者block + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51898168) +[copy](http://blog.csdn.net/estom_yin/article/details/51898168) + +1. **\\** + +2. **\**你可以把我隐藏，也可以让我显示哦\~**\** + +3. **\** + +4. **\** + +5. **\** + +6. var op = document.getElementById("ip"); + +7. var inp = document.getElementsByTagName("input"); + +8. inp[0].onclick = function () { + +9. op.style.display = "none"; + +10. } + +11. inp[1].onclick = function () { + +12. op.style.display = 'block'; + +13. } + +14. **\** + +15. **\\** diff --git a/JavaScript/教程/DOM对象三.md b/JavaScript/教程/DOM对象三.md new file mode 100644 index 00000000..4c4297db --- /dev/null +++ b/JavaScript/教程/DOM对象三.md @@ -0,0 +1,99 @@ +\>页面尺寸 + +\>\>宽高尺寸 + +> clientWidth / clientHeight窗口的宽度高度 + +> scrollWidth / scrollHeight文档内容的高度宽度 + +> offsetWidth / offsetHeight文档内容的高度宽度 + +\>\>坐标位置 + +> scrollleft / scrollTop滚轴的水平便宜距离，垂直偏移距离 + +> offsetLeft / offsetTop对象与页面的边距 + +> event.clientX / +> event.clientY事件触发时，鼠标指针对窗口的水平垂直坐标(event为时间) + +//注意事项：documentElement是整个节点树的根节点root，即html标签，document.body也是document能直接调用的属性标签 + +语法： + +> object.offsetLeft/oobject.offsetTop + +\>拖拽功能的实现 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51900581) +[copy](http://blog.csdn.net/estom_yin/article/details/51900581) + +1. **\** + +2. **\** + +3. **\** + +4. **\**event**\** + +5. **\** + +6. \#box { + +7. width: 100px; + +8. height: 100px; + +9. background-color: aquamarine; + +10. position: absolute; + +11. } + +12. **\** + +13. **\** + +14. **\** + +15. **\\** + +16. **\** + +17. var oDiv = document.getElementById("box"); + +18. oDiv.onmousedown = function(ev){ + +19. var oEvent = ev; + +20. var disX = oEvent.clientX-oDiv.offsetLeft; + +21. var disY = oEvent.clientY-oDiv.offsetTop; + +22. document.onmousemove = function(ev){ + +23. oEvent = ev; + +24. oDiv.style.left = oEvent.clientX - disX +"px"; + +25. oDiv.style.top = oEvent.clientY - disY +"px"; + +26. } + +27. document.onmouseup = function(){ + +28. document.onmousemove = null; + +29. document.onmouseup = null; + +30. } + +31. } + +32. + +33. **\** + +34. **\** + +35. **\** diff --git a/JavaScript/教程/DOM对象二——节点与遍历.md b/JavaScript/教程/DOM对象二——节点与遍历.md new file mode 100644 index 00000000..2b592a1c --- /dev/null +++ b/JavaScript/教程/DOM对象二——节点与遍历.md @@ -0,0 +1,306 @@ +\>父子节点 + +\>\>childNode + +> 使用语法：elementNode.childNodes + +> 注意事项：空白节点会被浏览器但顾总文本节点 + +\>\>firstChild lastChild + +> 使用语法：node.firstChild node.lastChild + +\>\>parentNode + +> 使用语法:elementNode.parentNode + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305) +[copy](http://blog.csdn.net/estom_yin/article/details/51899305) + +1. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\** + +5. **\** + +6. var li_num = 0; + +7. var childNodes = document.getElementById("father").childNodes; + +8. for(var i = 0; i **\<** **childNodes.length**; i++){ + +9. document.write("节点名：" + childNodes[i].nodeName + " "); + +10. document.write("节点类型：" + childNodes[i].nodeType + " "); + +11. if(childNodes[i].nodeType == 1){ + +12. document.write("我是" + childNodes[i].innerHTML + "**\**"); + +13. li_num++; + +14. } + +15. else{ + +16. document.write("**\**"); + +17. console.log("这是一个空节点，不用理他"); + +18. } + +19. } + +20. document.write("子节点数目：" + childNodes.length + "**\**"); + +21. document.write("li 子节点数目：" + li_num + "**\**"); + +22. document.write("文本子节点数目：" + (childNodes.length - li_num)); + +23. **\** + +24. **\\** + +//补充节点的属性还有title！ + +\>兄弟节点 + +> previousSibling nextSibling + +> 使用语法： + +> nodeobject.nextSibling / previousSibling + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305) +[copy](http://blog.csdn.net/estom_yin/article/details/51899305) + +1. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\**二娃**\** + +5. **\**三娃**\** + +6. **\** + +7. **\** + +8. function getprenode(node){ + +9. var prenode = node.previousSibling; + +10. while(prenode && prenode.nodeType != 1){ + +11. prenode = prenode.previousSibling; + +12. } + +13. return prenode; + +14. } + +15. function getnextnode(node){ + +16. var nextnode = node.nextSibling; + +17. while(nextnode && nextnode.nodeType != 1){ + +18. nextnode =nextnode.nextSibling; + +19. } + +20. return nextnode; + +21. } + +22. var second_children = document.getElementById("second_children"); + +23. var first_children = getprenode(second_children); + +24. var third_children = getnextnode(second_children); + +25. alert(first\_children.innerHTML+first_children.title); + +26. alert(third\_children.innerHTML+third_children.title); + +27. **\** + +28. **\\** + +//虽然觉得这是史上最无聊的程序，但还是含泪贴上了 + +\>创建节点方法 + +> createElement('tagName'):创建节点 + +> crreateTextNode("text")：穿件文本节点 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305) +[copy](http://blog.csdn.net/estom_yin/article/details/51899305) + +1. **\** var newinp = + document.createElement("input"); + +2. alert(newinp); + +3. var newtext = document.createTextNode("text"); + +4. alert(newtext);**\** + +\>添加删除节点 + +> nodeobject.appendChild(newnode)：父节点末尾添加 + +> nodeobject.removeChild(node)：删除节点 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305) +[copy](http://blog.csdn.net/estom_yin/article/details/51899305) + +1. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\** + +5. **\** + +6. **\** + +7. function createnode(){ + +8. var btn = document.createElement("input"); + +9. btn.setAttribute("type", "button"); + +10. btn.setAttribute("name", "紫金葫芦"); + +11. btn.setAttribute("value", "吸进去"); + +12. btn.setAttribute("onclick", "removenode()"); + +13. document.body.appendChild(btn); + +14. } + +15. function removenode(){ + +16. var fnode = document.getElementById("father"); + +17. var nodes = fnode.childNodes; + +18. for(var i = 0; i **\<** **nodes.length**; i++){ + +19. if(nodes[i] && nodes[i].nodeType == 1){ + +20. var rm = fnode.removeChild(nodes[i]); + +21. rm = null; + +22. break; + +23. } + +24. } + +25. } + +26. var createbtn = document.getElementById("createbtn"); + +27. createbtn.onclick = createnode; + +28. **\** + +29. **\\** + +//有很多需要注意的地方，等吃饭回来补充 + +> appendChild()方法的主体必须使父节点，而且只能添加到节点对类的末尾 + +\>插入节点 + +> fnode.insertBefore(newnode，node)：可以指定插如节点的位置（在node之前）返回值是插入的节点 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305) +[copy](http://blog.csdn.net/estom_yin/article/details/51899305) + +1. **\\** + +2. **\** + +3. **\**二娃**\** + +4. **\** + +5. **\** + +6. **\** + +7. function addnode(){ + +8. var fnode = document.getElementById("father"); + +9. var newnode = document.createElement("li"); + +10. newnode.innerHTML = "大娃"; + +11. fnode.insertBefore(newnode, fnode.childNodes[0]); + +12. } + +13. var add = document.getElementById("add-btn"); + +14. add.onclick = addnode; + +15. **\** + +16. **\\** + +\>替换子节点（克隆替换） + +> fonde.replaceChild(newnode, oldnode) //返回值是被替换的节点 + +**[html]** [view plain](http://blog.csdn.net/estom_yin/article/details/51899305) +[copy](http://blog.csdn.net/estom_yin/article/details/51899305) + +1. **\\** + +2. **\** + +3. **\**大娃**\** + +4. **\**二娃**\** + +5. **\** + +6. **\** + +7. **\** + +8. function replacenode(){ + +9. var oldnode = document.getElementById("first"); + +10. var newnode = document.createElement("li"); + +11. newnode.innerHTML = "金刚葫芦娃"; + +12. oldnode.parentNode.replaceChild(newnode, oldnode); + +13. } + +14. var replace = document.getElementById("replace-btn"); + +15. replace.onclick = replacenode; + +16. **\** + +17. **\\** diff --git a/JavaScript/教程/DOM简介.md b/JavaScript/教程/DOM简介.md new file mode 100644 index 00000000..e206b51e --- /dev/null +++ b/JavaScript/教程/DOM简介.md @@ -0,0 +1,155 @@ +\>DOM树（document_object_moudule） + +![724101446557.png](media/75813153285d5ceb04c812e98c3b33a1.png) + +\>\>DOM定义 + +是w3c文档对象模型，是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容、结构和样式。 + +\>\>DOM的组成 + +- 核心 DOM - 针对任何结构化文档的标准模型 + +- XML DOM - 针对 XML 文档的标准模型 + +- HTML DOM - 针对 HTML 文档的标准模型 + +\>DOM节点（通过结点树的方法指明了各个元素之间的关系） + +\>\>文档节点、元素节点、文本节点、属性节点、注释节点 + +\>\>所有的结点都可以通过JS进行访问、所有的HTML元素节点都可以别修改，也可以创建删除节点 + +\>\>节点关系 + +- 再节点树中，顶端点被称为根 + +- 每个节点都有父节点 + +- 一个节点可拥有任意数量的子节点 + +- 同胞是拥有相同父节点的结点 + +\>DOM方法（通过定义类的对象的方法，实现了访问结点） + +\>\>编程接口 + +可以通过JS等脚本语言对HTML_DOM进行访问 + +所有的HTML元素都被定义为对象，而编程接口则是对象的方法和对象的属性 + +方法是能够执行的动作（添加或修改元素节点） + +属性是能够获取或设置的值（节点的名称或内容） + +\>\>常用的HTML_DOM方法和属性 + +方法： + +访方法id,tagName,ClassName + +修改方法修改内容、修改样式、修改属性、创建节点、删除节点。 + +修改内容 + +document.getElementById("p1").innerHTML="New text!"; + +修改样式 + +document.getElementById("p2").style.color="blue"; + +创建节点 + +var node=document.createTextNode("This is new."); + +使用事件节点 + +\ + +添加元素 + +para.appendChild(node); + +element.insertBefore(para,child); + +删除元素 + +parent.removeChild(child); + +替换元素 + +parent.replaceChild(para,child); + +| 方法 | 描述 | +|--------------------------|-----------------------------------------------------------------| +| getElementById() | 返回带有指定 ID 的元素。 | +| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 | +| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 | +| appendChild() | 把新的子节点添加到指定节点。 | +| removeChild() | 删除子节点。 | +| replaceChild() | 替换子节点。 | +| insertBefore() | 在指定的子节点前面插入新的子节点。 | +| createAttribute() | 创建属性节点。 | +| createElement() | 创建元素节点。 | +| createTextNode() | 创建文本节点。 | +| getAttribute() | 返回指定的属性值。 | +| setAttribute() | 把指定属性设置或修改为指定的值。 | + +属性： + +innerHTML //元素节点的文本值 + +parentNode//元素节点的父节点 + +childNodes//元素节点的子节点 + +atrributes//元素节点的属性节点 + +nodeName属性规定节点的名称（只读） + +nodeValue规定节点的值 + +nodeType属性返回节点的类型 + +| 元素类型 | NodeType | +|----------|----------| +| 元素 | 1 | +| 属性 | 2 | +| 文本 | 3 | +| 注释 | 8 | +| 文档 | 9 | + +\>\>说一下自己的理解 + +在这里，将html中的各个部分解析成节点的概念，有助于通过结点树建立节点关系模型，非常好，而且简单。 + +然后，有将html中各个部分，定义成对象，并且定义了对象的属性和方法，能够很轻松的完成对元素的访问和操作。 + +提到对象，联系C++中的知识，可以知道，对象，主要包括数据成员和成员函数，前者就是对象的属性，后者是对象的方法。 + +然后再说一下这里的DOM的理解，文档对象模型。简单的说，就是讲整个html文档中的所有元素，定义成节点和对象的过程 + +并且通过这种定义，简化并且系统的表达了对html的访问和操作。 + +\>DOM中相关的事件 + +.onclick=function(){displayDate()}; + +onclick="displayDate()" + +onload="checkCookies()" + +onchange="upperCase()" + +onmouseover onmouseout + +onmousedown onmouseup + +\>DOM + +var x = document.getElementsByTagName("p") + +返回是节点数组 + +x.length能返回数组的长度 diff --git a/JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png b/JavaScript/教程/media/04d4031de63e53c5addd72792a6b60bd.png new file mode 100644 index 0000000000000000000000000000000000000000..3de64dc3a840eb8c808003818a8e453a3726879b GIT binary patch literal 1520 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