随笔分类 - DOM对象
摘要：<body> <div>我是div</div> <span>我是span</span> </body> <script> var div = document.querySelector("div"); // 1.nextSibling 下一个兄弟节点 包含节点或者 文本节点等等 console.l
阅读全文
摘要：<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script> let ul = document.querySelector("ul"); // 2.children 实际开发的写法
阅读全文
摘要：parentNode.children(非标准); parentNode.children是一个只读属性，返回所有的子元素节点。 它只返回子元素节点，其余节点不返回(重点掌握) 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用 DOM提供的获取 (API)获取 <b
阅读全文
摘要：<style> * { padding: 0; margin: 0; } .box { width: 500px; height: 200px; border: 1px solid #ccc; margin: 50px auto; overflow: hidden; } ul { width: 60
阅读全文
摘要：<body> <div class="box"> <span class="erweima">**</span> </div> </body> <script> // 1.父节点 parentNode let erweima = document.querySelector(".erweima");
阅读全文
摘要：1.获取 属性值 element ?属性 获取属性值 element.getAttribute('属性') 区别： element.属性 获取内置属性值(元素本身自带属性) element.getAttribute('属性');主要获得自定义的属性(标准)我们程序员自定义的属性 <body> <di
阅读全文
摘要：<style> * { margin: 0; padding: 0; } table { width: 500px; position: relative; margin: 100px auto; border-collapse: collapse; border: 1px solid #d7d7d
阅读全文
摘要：<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </body> <script> // 获取所有按钮元素 let btns
阅读全文
摘要：<style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } img { border: 0px; vertical-align: middle; width: 192px; } div {
阅读全文
摘要：<style> input { color: #777777; } </style> </head> <body> <input type="text" value="手机" /> </body> <script> let ipt = document.querySelector("input");
阅读全文
摘要：<style type="text/css"> #box { width: 250px; margin: 100px auto; } #box li { width: 24px; height: 24px; float: left; margin: 10px; background-color: p
阅读全文
摘要：<style> div { width: 50px; height: 50px; background-color: aquamarine; } </style> </head> <body> <div>1</div> </body> <script> let dv = document.query
阅读全文
摘要：<style> #dv1 { width: 100px; height: 100px; background-color: rgb(232, 121, 217); } #dv2 { width: 10px; height: 10px; background-color: black; float:
阅读全文
摘要：<body> <button>按钮</button> <input type="text" value="输入内容" /> </body> <script> // 1.获取元素 var btn = document.querySelector("button"); var input = docum
阅读全文
摘要：<body> 密码：<input type="password" /> <button>眼睛</button> </body> <script> let ipt = document.querySelector("input"); let btn = document.querySelector("
阅读全文
摘要：根据系统不同时间来判断，所以需要用到日期内置对象 利用多分支语句来设置不同的图片 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性 需要一个div元素，显示不同问候语，修改元素内容即可 <script> // 1.获取元素 let img = document.querySelect
阅读全文
摘要：点击图片body就变成图片 修改元素属性 src 1.获取元素 var one = document.getElementById("one"); var tu = document.getElementById("tu"); var img = document.querySelector("im
阅读全文
摘要：element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 element.innerHTML 起始位置到终点位置的全部内容。包括HTML标签，同时保留空格和换行 innerText和innerHTML的区别 1. innerText 不认识html
阅读全文
摘要：<style> div { width: 300px; height: 30px; line-height: 30px; color: #fff; background-color: pink; } </style> <body> <button id="btn">显示当前时间</button> <
阅读全文
摘要：1.获取事件源2.注册事件(绑定事件)3.添加事件处理程序(采用函数赋值形式) <script> var dianji = document.getElementById("dianji"); dianji.onclick = function () { console.log("我被选中了");
阅读全文
