随笔分类 -  DOM速查

综合案例：微博发布新鲜事
摘要：1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #bo 阅读全文
posted @ 2019-12-20 17:15 杨小越 阅读(261) 评论(0) 推荐(0)
元素的属性相关操作element.getAttribute('xxx'),element.setAttribute('xxx','xxx'),element.removeAttribute('xxx')
摘要：1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="demo" class="one" title="鼠标经过"> 阅读全文
posted @ 2019-12-20 16:32 杨小越 阅读(286) 评论(0) 推荐(0)
克隆节点element.cloneNode(boolean)案例
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="div"> <span id="sp">外<span>内</span></sp 阅读全文
posted @ 2019-12-20 15:53 杨小越 阅读(485) 评论(0) 推荐(0)
移除孩子节点element.removeChild(孩子节点)案例
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <ul id="ul"> <li>旧节点</li> </ul> </div> <sc 阅读全文
posted @ 2019-12-20 15:41 杨小越 阅读(718) 评论(0) 推荐(0)
插入节点element.appendChild(要插入的节点),element.insertBefore(要插入的节点,参考节点)案例
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><div><ul id="ul"> <li>旧节点</li></ul></div><script> let 阅读全文
posted @ 2019-12-20 15:32 杨小越 阅读(903) 评论(0) 推荐(0)
创建节点document.createElement('div')案例
摘要：1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div> 9 10 </div> 11 <script> 12 阅读全文
posted @ 2019-12-20 15:21 杨小越 阅读(4713) 评论(0) 推荐(0)
查找子节点element.firstElementChild,element.lastElementChild,element.children案例
摘要：1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div> 9 <ul id="ul"> 10 <li>1</l 阅读全文
posted @ 2019-12-20 15:15 杨小越 阅读(264) 评论(0) 推荐(0)
查找邻近兄弟节点element.nextElementSibling与element.previousElementSibling案例
摘要：1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <body> 9 <div> 10 <ul> 11 <li>123</li> 阅读全文
posted @ 2019-12-20 15:06 杨小越 阅读(280) 评论(0) 推荐(0)
查找父节点element.parentNode案例：关闭模态框
摘要：1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div { 8 width: 400px; 9 height: 400px; 10 阅读全文
posted @ 2019-12-20 14:59 杨小越 阅读(221) 评论(0) 推荐(0)