13.dom-js查找<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div class="box"></div><div class="box"></div><div name="xxxx"></div><div><span>what are you doing!!!</span><div id="btn">1111<p>1212</p>2222<p>3434</p></div><a href="https://www.baidu.com"></a></div><script>var box = document.getElementsByClassName('box')var btn = document.getElementById('btn')// 通过id去查找标签var res = document.getElementsByTagName('div')// 通过TagName查找标签var res1 = document.getElementsByName('xxxx')// name属性去查找标签console.log(res.length)console.log(res1)var res2 =document.getElementById('btn').childNodes// 寻找所有的儿子节点. 包括文本在内var res3 = document.getElementById('btn').children// 寻找所有的儿子节点. 不包括文本var res4 = document.getElementById('btn').parentNode// 寻找父亲节点var res5 = document.getElementById('btn').nextSibling// 寻找下一个兄弟节点. 包括text节点var res6 = document.getElementById('btn').nextElementSibling// 寻找下一个兄弟节点. 不包括text节点var res7 = document.getElementById('btn').previousElementSibling// 寻扎上一个兄弟节点. 不包括text节点var res8 = document.getElementById('btn').firstElementChild// 寻找第一个儿子节点. 不包括text节点var res9 = document.getElementById('btn').firstChild// 寻找第一个儿子节点. 包括text节点var res10 = document.getElementById('btn').lastElementChild// 寻找最后一个儿子节点. 不包括text节点var res11 = document.getElementById('btn').lastChild// 寻找最后一个儿子节点. 包括text节点console.log(res10)</script></body></html>14.dom-创建 删除 替换<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;border: 1px solid red;}</style></head><body><div class="box"><p>1111</p><p>2222</p><p>3333</p><p>4444</p></div><script>// 创建元素var oDiv = document.createElement('div')// console.log(oDiv)oDiv.style.width = '50px'oDiv.style.height = "50px";oDiv.style.backgroundColor = 'red'// 末尾添加元素var box = document.getElementsByClassName('box')[0]box.appendChild(oDiv)// 插入子元素// box.insertBefore(新节点, 某个节点)var p3 = document.getElementsByTagName("p")[2]// console.log(p3)box.insertBefore(oDiv, p3)// 删除子元素// var p4 = document.getElementsByTagName('p')[3]// box.removeChild(p4)// 替换子元素var p5 = document.getElementsByTagName('p')[3]// 寻找第四个p标签console.log(p5)box.replaceChild(oDiv, p5)</script></body></html>15.dom-修改元素属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 200px;border: 1px solid red;}</style></head><body><div class="box" name="123213123" style="background-color: pink"><div class="box2"></div><p>333333</p></div><img src="http://www.xxx.com/1.png" ><p id="ppp" name="new attribute">4444444</p><!--<input type="text">--><script>// 修改子元素var box=document.getElementsByClassName("box")[0]box.innerText="哈哈哈"box.innerHTML="<p>1111</p>"box.innerText="<p>哈哈哈哈啊</p>"// 会覆盖之前的标签// 属性操作var res=box.getAttribute("name")var res=box.setAttribute("x","11111")box.removeAttribute("class")console.log(res)box.setAttribute("style","background-color: red;width:100px")// 样式操作box.style.fontSize="50px"box.style.backgroundColor="red"// 默认属性操作var img = document.getElementsByTagName('img')[0]console.log( img.getAttribute("src"))console.log(img.src)var p=document.getElementById("ppp")alert(p.innerText)var inp = document.getElementsByTagName('input')[0]alert(inp.getAttribute("value"))alert(inp.value)var p=document.getElementById("ppp")alert(ppp.name)</script></body></html>
经验总结扩展阅读
- 云原生时代的DevOps平台设计之道
- vue2使用组件进行父子互相传值的sync语法糖方法和原生方法
- JavaScript之无题之让人烦躁的模块化
- 云原生强大且灵活的持续集成CI开源框架Tekton实战-上
- 云原生下基于K8S声明式GitOps持续部署工具ArgoCD实战-上
- 云原生虚拟网络 tun/tap & veth-pair
- 原生Redis跨数据中心双向同步优化实践
- 五 JPA - 原生SQL实现增删改查
- Javascript 手写 LRU 算法
- 原生之罪中的桦城是哪里?