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

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

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)

相关文章
|
17天前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
27 1
|
18天前
|
JavaScript 前端开发
JavaScript中exec()方法详解
在这个示例中,exec()方法会找到两个匹配项,并打印出它们在字符串中的位置。
12 1
|
17天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
14 0
|
17天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
18天前
|
JavaScript
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
|
18天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
|
18天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
14 0
|
JavaScript 前端开发 数据安全/隐私保护
|
JavaScript 前端开发 数据安全/隐私保护
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
28 2