dom基础5 傷城~ 2022-01-19 01:11 239阅读 0赞 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <div id="parentDiv"> 父div内容 <div id="d1">第一个div</div><div id="d2">第二个div</div> <div id="d3">第三个div</div> </div> <button onclick="showParent()">递归父节点</button> <script> var node = null; function showParent(){ if(null==node){ node = document.getElementById("parentDiv"); } if(document == node){ alert("已是根节点,document"); }else{ alert(node.parentNode); node = node.parentNode; } } </script> <!--获取兄弟节点--> <script> function showPre(){ var d2 = document.getElementById("d2"); alert(d2.previousSibling.innerHTML);//第一个div } function showNext(){ var d2 = document.getElementById("d2"); alert(d2.nextSibling.nodeName);//#text,div2和div3之间有空格换行 } </script> <br> <button onclick="showPre()">获取前一个同胞</button> <button onclick="showNext()">获取后一个同胞</button> <br> <!--子节点--> <!--注:childNodes会包含文本节点,而,children会排出文本节点--> <script type="text/javascript"> var div = document.getElementById("parentDiv"); function getFirst(){ alert(div.firstChild.nodeName);//#text } function getLast(){ alert(div.lastChild.nodeName);//#text } function showAll(){ alert(div.childNodes.length);//6 } function show(){ var ds = div.childNodes; var s = ds[0]+"<br>"; for(var i = 1; i<ds.length; i++){ s += ds[i]+"<br>" } document.getElementById("message").innerHTML = s; } </script> <br> <button onclick="getFirst()">获取第一个子</button> <button onclick="getLast()">获取最后一个子</button> <button onclick="showAll()">获取子的长度</button> <br> <button onclick="show()">打印所有节点</button> <div id="message">打印出所有节点</div> <br> </body> </html>
相关 DOM基础 DOM查找 -------------------- JavaScript DOM基础 DOM是Document Object Model(文档对象模型)的缩写 Myth丶恋晨/ 2023年07月17日 14:02/ 0 赞/ 19 阅读
相关 dom基础8 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 素颜马尾好姑娘i/ 2022年05月01日 12:12/ 0 赞/ 176 阅读
相关 dom基础4 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 约定不等于承诺〃/ 2022年01月20日 14:47/ 0 赞/ 201 阅读
相关 dom基础3 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 骑猪看日落/ 2022年01月20日 14:27/ 0 赞/ 234 阅读
相关 dom基础2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti r囧r小猫/ 2022年01月20日 14:25/ 0 赞/ 208 阅读
相关 dom基础1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 矫情吗;*/ 2022年01月20日 14:05/ 0 赞/ 199 阅读
相关 dom基础7 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 落日映苍穹つ/ 2022年01月19日 05:45/ 0 赞/ 181 阅读
相关 dom基础6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 梦里梦外;/ 2022年01月19日 02:15/ 0 赞/ 199 阅读
相关 dom基础5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 傷城~/ 2022年01月19日 01:11/ 0 赞/ 240 阅读
相关 【HTML5基础】DOM操作 本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 文章目录 1.自定义属性 2.鼠标点击时T ╰半橙微兮°/ 2021年12月10日 02:47/ 0 赞/ 348 阅读
还没有评论,来说两句吧...