Dom对象的属性和方法
自定义的熟悉操作
上面是今天博客要讲述的内容
一个案例回顾上次课讲的内容 下面是Html中的元素布局结构
<div>我是div审查元素 <p>我是p标记的元素</p> <span>我是span的元素信息</span> </div> <div class="one"> <p class="two">我是class选择器</p> <p id="three">我是第二个元素</p> <p>段落标签</p> <from> <table> <tr> <td>姓名</td> <td><input type="text" name="name" id="" placeholder="请用户输入姓名"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" id="" placeholder="请用户输入密码"></td> </tr> </table> </from> </div> <div class="two"> <p class="two">我是第三个节点</p> <p id="two">我是第二个元素</p> <p> <ul id="tabelList"> <li>我是标签li</li> <li>我是标签精准定位获取的元素信息</li> <li>我是标签li</li> <li>我是标签li</li> <li>我是标签li</li> <li>我是标签li</li> <li>我是标签li</li> <li>我是标签li</li> <li>我是标签li</li> <li>我是标签li</li> </ul> </p> </div>
下面的基本操作是对上次课的节点操作的回顾 注释在文件中 不在过多的介绍
<script> // 文档声明 var DOCTYPE = document.doctype console.log(DOCTYPE) // html var html = document.documentElement console.log(html); html.style.background = 'pink' // head var head = document.head console.log(head) head.style.background = "yellow" // body var body = document.body console.log(body) body.style.background = 'pink' // head的子节点 console.log("获得head的子节点的理解") var head = document.head console.log(head) var one = document.head.children[0] console.log(one) console.log(document.head.children[1]) console.log(document.head.children[2]) console.log(document.head.children[3]) console.log(document.head.children[4]) console.log(document.head.children[5]) </script>
// 兄弟节点 // document.head.nextElementSibling 获取head的后一个节点元素为body console.log(document.head.nextElementSibling) // document.body.previousElementSibling 获取body的前兄弟节点是 head console.log(document.body.previousElementSibling) // 父节点 console.log("获取父元素的节点") console.log(document.head.parentNode) console.log(document.body.parentNode) // 总结 获取document.head.parentNode)和document.body.parentNode 总节点为Html // console.log(document.html.parentNode) 报错 console.log("____________________________________________________________________________________________") console.log("获取元素的父节点") console.log(document.body.parentElement) console.log(document.head.parentElement) // 总结 获取document.head.parentElement)和document.body.parentElement总节点为Html
// document.head.nextElementSibling 获取head的后一个节点元素为body console.log(document.head.nextElementSibling) // document.body.previousElementSibling 获取body的前兄弟节点是 head console.log(document.body.previousElementSibling) var two = document.body.children[0] console.log(two) console.log(document.body.children[1]) console.log(document.body.children[2]) console.log(document.body.children[3]) // 第一个 console.log(document.body.firstChild) console.log(document.body.lastChild) console.log("操作Dom对象的属性和方法")
一个基础案例 带你了解 Dom对象的属性和方法
<div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> <li class="nav_li">项目名称</li> </ul> </div>
带你了解 Dom对象的属性和方法
// 1. getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); var nav_li=document.getElementsByClassName('nav_li') console.log(nav_li) // 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis);
在上面的6个方法中最常用的是上面的两个方法
// 5.querySelector() — 精准的获取某个元素 var e = document.querySelector("#tabelList li:nth-child(2)") console.log(e)
// 6.querySelectorAll()获取符合类名或者标签名等条件的的所有元素 var f = document.querySelectorAll('div') console.log(f)
自定义属性操作 语法如下
自定义的熟悉操作
自定义属性操作 运行效果如上所示
<div age="12" ac="" wer class="box" id="div1"></div>
var div1 = document.querySelector("#div1") //通过document.querySelector("#div1") 获取div1盒子 var flag = div1.hasAttribute("age") //判断属性是否存在 var attr = div1.getAttribute("age") //获取属性的值 var srt = div1.setAttribute("name", "tyu") //设置属性值 var ligt = div1.getAttribute("name") //删除属性值没有返回值 // var liko = div1.removeAttribute("ligt") //获取所有的属性的内容 console.log(div1) console.log(ligt) console.log(liko) var attrs=div1.attributes //获取所有的属性 console.log(attrs) for(var item of attrs){ console.log(item) } // console.log(flag)
