JavaScript的组成:
1. ECMAScript-语法规范
2. Web APIs(浏览器提供的工具)
(1).BOM (浏览器对象模型)
(2).DOM (文档对象模型)
今天就来讲讲DOM的增删改查 (废话不多说上代码)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <div class="app"> 12 <div class="title">123</div> 13 </div> 14 <script> 15 /* 16 获取节点的方式 17 1. document.getElementById() //根据节点的id值来获取该节点 18 2. document.getElementByTagName() //根据节点的标签来获取该节点 19 3. document.getElementByName() //根据节点的属性值来获取该节点 20 4. document.getElementByClassName() //根据节点的类名来获取该节点 21 5. document.querySelectorAll() //根据元素标签获取节点 考虑兼容 22 */ 23 var app = document.getElementsByClassName("app")[0] 24 /* 25 从一个中心节点访问其所有直系或亲属节点 26 1,访问父节点 parentNode 27 2,访问上一个兄弟节点 previousSibling 28 3,访问下一个兄弟节点 nextSibling 29 4,访问该节点的第一个属性节点 attributes[1] 30 5,访问最后一个子节点 lastChild 或 childNodes[childNodes.length-1] 31 32 //--------------------------------------------------------------------------- 33 34 获取属性 35 getAttribute("属性名") //返回属性值 36 getAttributeNode("属性名") //返回属性节点 37 38 39 40 创建 (常用) 41 document.createElement() //创建元素节点 42 document.createTextNode() //创建文本节点 43 document.createAttribute() //创建属性节点 44 innerHTML 45 innerText 46 cloneNode() //克隆 47 48 49 50 加入 51 appendChild() //追加到尾出 52 insertBefore() //将元素插入到某一元素的前面 53 用法: 父元素.insertBefore(要插入的新元素,新元素插入其前面的元素) 54 55 56 57 删除 58 removeChild //删除子元素 59 removeAttributeNode //删除属性节点 60 61 62 63 修改节点 64 删除再加入 65 修改样式 66 style.***=*** 67 setAttribute("style","****") 68 修改文本 69 .innerHTML 70 .innerText 71 节点操作 72 .nodeValue 73 修改属性 74 .属性名=属性值 75 .setAttribute("属性名","属性值") 76 77 78 79 其余常用的操作 80 style //修改css样式 81 setAttribute("属性名","属性值") // 设置属性 82 83 </script> 84 </body> 85 86 </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。