JS(Dom对象的属性和方法)第十六课

news2024/12/23 1:09:24

上面是今天博客要讲述的内容

一个案例回顾上次课讲的内容下面是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>

  // 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);

// 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)