JavaScript内容回顾第八天

最新推荐文章于 2024-07-18 11:48:33 发布

coderyhh

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量183

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/javacguxue/article/details/127916603

版权

内容回顾

一. JavaScript的DOM操作（一）

1.1. 继承的优点

代码复用

1.2. 节点导航

如果我们获取到一个节点（Node）后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航
节点之间存在如下的关系：
- 父节点：parentNode
- 前兄弟节点：previousSibling
- 后兄弟节点：nextSibling
- 子节点：childNodes
- 第一个子节点：firstNode
- 第二个子节点：lastNode

<!-- 我是注释, 哈哈 -->
  我是文本, 呵呵呵
  <div class="box">哈哈哈哈哈</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

// html元素
    // var htmlEl = document.documentElement
    // body元素
    // var bodyEl = document.body
    // head元素
    // var headEl = document.head
    // 文档声明
    // var doctype = document.doctype
    // console.log(htmlEl, bodyEl, headEl, doctype)

    // 1. 获取节点导航
    var bodyEl = document.body
    // 1.1. 获取body所有的子节点
    // console.log(bodyEl.childNodes)
    
    // 1.2 获取body第一个子节点
    // console.log(bodyEl.firstChild)
    var bodyElFirstChild = bodyEl.firstChild
    // 1.3 获取body中的注释
    var bodyElCommentChild = bodyElFirstChild.nextSibling
    console.log(bodyElCommentChild)
    // 1.4 获取body的父节点
    var bodyParent = bodyEl.parentNode
    console.log(bodyParent)

1.3. 元素导航

**如果我们获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为***元素之间的导航节点之间存在如下的关系：
- 父元素：parentElement
- 前兄弟节点：previousElementSibling
- 后兄弟节点：nextElementSibling
- 子节点：children
- 第一个子节点：firstElementChild
- 第二个子节点：lastElementChild


  <!-- 我是注释, 哈哈哈 -->
  我是文本, 呵呵呵

  <div class="box">哈哈哈哈哈</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

var bodyEl = document.body
    
    // 根据body元素去获取子元素(element)
    var childElement = bodyEl.children
    // console.log(childElement)

    // 获取box元素
    var boxEl1 = bodyEl.firstElementChild
    // 索引去获取
    var boxEl2 = bodyEl.children[0]
    // console.log(boxEl1)
    // console.log(boxEl2)

    // 获取ul元素
    // 后兄弟元素
    var ulEl = boxEl1.nextElementSibling
    // console.log(ulEl)
    var liEl = ulEl.children
    console.log(liEl)

1.4. table、form导航

元素支持 (除了上面给出的，之外) 以下这些属性：
- table.rows — 元素的集合；
- table.caption/tHead/tFoot — 引用元素，，；
- table.tBodies — 元素的集合；
，，元素提供了 rows 属性：
- tbody.rows — 表格内部元素的集合；
：
- tr.cells — 在给定中的和单元格的集合；
- tr.sectionRowIndex — 给定的在封闭的 // 中的位置（索引）；
- tr.rowIndex — 在整个表格中的编号（包括表格的所有行）；

和：
- td.cellIndex — 在封闭的中单元格的编号。

 /*  
      table元素支持(除上面给出的之外)一下这些属性
        table.rows  <tr> 元素的集合
        table.caption/tHead/tFoot 引用元素 <caption> <thead> <tfoot>
        table.tBoodies  <tbody> 元素的集合
      
      <thead> <tfoot> <tbody>元素提供了rows属性
        tbody.rows 表格内部<tr>元素的集合
      
      <tr>
        tr.cells 在给定<tr>中的<td>和<th>单元格的集合
        tr.sectionRowindex 给定的<tr>在封闭的<thead> <tbody> <tfoot>中位置(索引)
        tr.rowindex 在整个表格中 <tr>的编写(包括表格的所有行)

      <td> 和 <th>
        td.ceiindex 在封闭的<tr>单元格的编号
    */

    // 小技巧 加上 as HTMLTableElement下面的tHead就有提示了
    var tableEl = document.body.children[0]

    // 通过table元素获取内部的后代元素
    console.log(tableEl.tHead, tableEl.tBodies, tableEl.tFoot)
    // rows所有的行
    console.log(tableEl.rows)

    // 拿到一行元素
    var rowEl = tableEl.rows[2]
    console.log(rowEl.cells[0])

<form action="">
    <input name="account" type="text">
    <input name="password" type="password">
    <input name="kobes" type="checkbox" checked>
    <select name="fruis">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
    </select>
  </form>

// 获取form
    // var formEl = document.body.firstElementChild
    var formEl = document.forms[0]
    
    // 获取form元素的子元素
    // var inputEl = formEl.children[0]
    var inputEl = formEl.elements.account
    // console.log(inputEl)
    setTimeout(function () {
      console.log(inputEl.value)
    }, 5000)

1.5. 获取任意元素方法

方法名 搜索方式 可以在元素上调用？ 实时的？
querySelector CSS-selector ✔ -
querySelectorAll CSS-selector ✔ -
getElementById id - -
getElementsByName name - ✔
getElementsByTagName tag or '*' ✔ ✔
getElementsByClassName class ✔ ✔

document.getElementsByClassName
document.getElementById
document.querySelector()
document.querySelectorAll()

开发中如何选择呢？
- 目前最常用的是querySelector和querySelectAll；
- getElementById偶尔也会使用或者在适配一些低版本浏览器时；

<div class="box">
    <h2>我是标题</h2>
    <div class="container">
      <p>
        我是段落, <span class="keyword">coderwhy</span> 哈哈哈
      </p>
      <p>
        我也是段落, <span class="keyword">coderwhy</span> 哈哈哈
      </p>

      <div class="articls">
        <h2 id="title">我是小标题</h2>
        <p>
          我是文章的内容, 哈哈哈哈哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊
        </p>
      </div>
    </div>
  </div>

// 拿到body
    // var bodyEl = document.body

    // 拿到box
    // var boxEl = bodyEl.firstElementChild

    // 拿到container
    // var containerEl = boxEl.children[1]

    // 拿到p元素
    // var pEl = containerEl.children[0]

    // 拿到keyword
    // var spanEl = pEl.children[0]
    // console.log(spanEl)
    // spanEl.style.fontSize = "60px"
    // spanEl.style.color = "red"


    // 
    // 直接获取到keyword
    // var spanEl = document.querySelector(".keyword")
    // spanEl.style.fontSize = "60px"
    // spanEl.style.color = "red"

    // 通过class获取
    // var keywords = document.getElementsByClassName("keyword")
    // keywords.style.color = "red"
    // console.log(keywords)
    // 修改第一个
    // keywords[0].style.color = "red"

    // 修改所有的keyword
    // for (var i = 0; i < keywords.length; i++) {
      // keywords[i].style.color = "red"
    // }

    // 通过id获取元素
    // var titleEl = document.getElementById("title")
    // titleEl.style.color = "red"


    /* 
      当元素彼此靠近或者相邻时, DOM导航属性非常有用
        但是, 在实际开发中, 我们希望可以任意获取到某一元素应该如何操作
      DOM为我们提供了获取元素的方法
        querySelector
        querySelectorAll
        getElementById
        getElementsByName  几乎用不到
        getElementsByTagName  偶尔可能会用
        getElementsByClassName

      开发中如何选择呢
        目前最常用的是querySelector和querySelectorAll
        getElementByid偶尔也会使用或者在适配一些的低版本浏览器时
    */

    // 通过选择器
    // 如果由多个keyword就找到第一个就不找了
    // var keywordEl = document.querySelector(".keyword")
    // 多个keyword
    var keywordEl = document.querySelectorAll(".keyword")
    // for (var i = 0; i < keywordEl.length; i++) {
    //   keywordEl[i].style.color = "red"
    // }

    for (var el of keywordEl) {
      el.style.color = "red"
    }

    var titleEl = document.querySelector("#title")
    titleEl.style.color = "red"

1.6. Node节点常见的属性

nodeType
nodeName/tagName
innerHTML/outerHTML/textContent
nodeValue/data

目前，我们已经可以获取到节点了，接下来我们来看一下节点中有哪些常见的属性：
- 当然，不同的节点类型有可能有不同的属性；
- 这里我们主要讨论节点共有的属性；
nodeType属性：
- nodeType 属性提供了一种获取节点类型的方法；
- 它有一个数值型值（numeric value）；

常量 值 描述
Node.ELEMENT_NODE 1 一个 元素 节点，例如 <p> 和 <div>。
Node.TEXT_NODE 3 Element 或者 Attr 中实际的 文字
Node.COMMENT_NODE 8 一个 Comment 节点。
Node.DOCUMENT_NODE 9 一个 Document 节点。
Node.DOCUMENT_TYPE_NODE 10 描述文档类型的 DocumentType 节点。例如 <!DOCTYPE 
html> 就是用于 HTML5 的。

nodeName：获取node节点的名字；
tagName：获取元素的标签名词；
tagName 和 nodeName 之间有什么不同呢？
- tagName 属性仅适用于 Element 节点；
- nodeName 是为任意 Node 定义的：
  - 对于元素，它的意义与 tagName 相同，所以使用哪一个都是可以的；
  - 对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；
innerHTML 属性
- 将元素中的 HTML 获取为字符串形式；
- 设置元素中的内容；

outerHTML 属性
- 包含了元素的完整 HTML
- innerHTML 加上元素本身一样；
textContent 属性
- 仅仅获取元素中的文本内容；

innerHTML和textContent的区别：
- 使用 innerHTML，我们将其“作为 HTML”插入，带有所有 HTML 标签。
- 使用 textContent，我们将其“作为文本”插入，所有符号（symbol）均按字面意义处理。
nodeValue/data
- 用于获取非元素节点的文本内容

// 1. 获取三个节点
    // 获取body所有的子节点
    var bodychildNodes = document.body.childNodes
    var commentNode = bodychildNodes[1]
    var textNode = bodychildNodes[2]
    var divNode = bodychildNodes[3]
    // console.log(commentNode, textNode, divNode)

    // 2. 节点属性
    // nodeType 节点类型
    // for (var node of bodychildNodes) {
    //   if (node.nodeType === 8) {

    //   } else if (node.nodeType === 3) {

    //   }
    // }
    // console.log(commentNode.nodeType, textNode.nodeType, divNode.nodeType)

    // 3. nodeName  节点名称
    // tagName 针对元素(element)
    // console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName)
    // console.log(commentNode.nodetagName, divNode.tagName)

    // 4 data(nodeValue)/innerTHML/textContent
    // data 针对非元素节点获取数据
    // innerHTML 对应html元素也会获取
    // textContent只会获取文本
    // console.log(commentNode.data, textNode.data, divNode.data)
    // console.log(divNode.innerHTML)
    // console.log(divNode.textContent)


    // 设置文本, 作用是一样
    // 设置文本中包含元素内容, 那么innerHTML浏览器会解析, textContent会当成文本的一部分
    // divNode.innerHTML = "<h2>呵呵呵呵</h2>"
    // divNode.textContent = "<h2>嘿嘿嘿</h2>"

    // 5. outerHTML
    console.log(divNode.outerHTML)

1.7. 全局属性-hidden

hidden属性：也是一个全局属性，可以用于设置元素隐藏

<button class="btn">切换</button>
  <!-- hidden -->
  <div id="abc" class="cba" title="aaa" style="color: red;">
    哈哈哈哈哈
  </div>

 // 1. 获取元素
    var boxEl = document.querySelector(".cba")
    var btnEl = document.querySelector(".btn")
    
    // 2. 监听btn的点击
    btnEl.onclick = function() {
      // 1. 只是隐藏
      // boxEl.hidden = true
      // boxEl.style.display = "none"

      // 2. 切换
      // if (boxEl.hidden === false) {
      //   boxEl.hidden = true
      // } else {
      //   boxEl.hidden = false
      // }

      // 3. 直接取反
      boxEl.hidden = !boxEl.hidden
    }

二. JavaScript的DOM操作（二）

2.1. attribute分类

浏览器在解析HTML元素时，会将对应的attribute也创建出来放到对应的元素对象上。
- 比如id、class就是全局的attribute，会有对应的id、class属性；
- 比如href属性是针对a元素的，type、value属性是针对input元素的；
属性attribute的分类：
- 标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；
- 非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；

<!-- 属性: attribute(特性) -->
  <!-- 
    attribute分类
      1. 如果是HTML标准指定的attribut, 称之为标准Attribute
      2. 而自定义的Attribute, 称之为非标准Attributte
   -->
  <div id="abc" class="box" title="box"
  age="18" height="1.88">
    我是box
  </div>
  <a href="www.baidu.com">百度一下</a>
  
  <script>

    /* 
      前面学到了如何获取节点, 以及节点通常所包含的属性, 接下来我们来仔细研究元素Element
      我们知道, 一个元素有开始标签, 结束标签, 内容之外, 还有很多属性(attribute)

      浏览器在解析html元素时, 会将对应的attribute也创建出来放到对应的元素对象上
        比如id, calss就是全局的attribute, 会有对应的id, calss属性
        比如href属性是针对a元素的, type, value属性是针对input的
    */

2.3. 所有attribute操作

对于所有的attribute访问都支持如下的方法：

elem.hasAttribute(name) — 检查特性是否存在。
elem.getAttribute(name) — 获取这个特性值。
elem.setAttribute(name, value) — 设置这个特性值。
elem.removeAttribute(name) — 移除这个特性。
attributes：attr对象的集合，具有name、value属性；

<div id="abc" class="box" title="box" age="18" height="1.88">
    我是box
  </div>
  <input type="checkbox" checked="checked">

var boxEl = document.querySelector(".box")
    /* 
      对于所有的attribute访问都支持如下的方法
        elem.hasAttribute(name): 检查特性是否存在
        elem.getAttribute(name): 获取这个特性值
        elem.setAttribute(value):  设置这个特性值
        elem.removeAttribute(name): 移除这个特性
        attributes: attr对象的几个, 具有name, value属性

      attribute具备以下特性
        它们的名字是大小写不敏感的(id与ID相同)
        它们的值总是字符串类型的
    */
    
    // 1. 所有的attribute都支持的操作
    console.log(boxEl.hasAttribute("age"), boxEl.hasAttribute("abc"), boxEl.hasAttribute("id"))
    console.log(boxEl.getAttribute("age"), boxEl.getAttribute("abc"), boxEl.getAttribute("id"))

    boxEl.setAttribute("id", "cba")
    boxEl.removeAttribute("id")

    var boxAttribute = boxEl.attributes
    for (var attr of boxAttribute) {
      console.log(attr.name, attr.value)
    }

    // 2. 通过getAttribute()一定是字符串类型
    var inputEl = document.querySelector("input")
    console.log(inputEl.getAttribute("checked"))

attribute具备以下特征：
- 它们的名字是大小写不敏感的（id 与 ID 相同）。
- 它们的值总是字符串类型的

2.4. property操作

什么叫property
- 对象中的属性称之为property
标准的attribute会转成对象模型中的property
两个之间会相互影响

对于标准的attribute，会在DOM对象上创建与其对应的property属性：
在大多数情况下，它们是相互作用的
- 改变property，通过attribute获取的值，会随着改变；
- 通过attribute操作修改，property的值会随着改变；
  - 但是input的value修改只能通过attribute的方法；
除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：
- 这是因为它默认情况下是有类型的；

<!-- 元素中的属性称之为attribute -->
  <!-- 标准的attribute在对应的对象模型中都有对应的property -->
  <div id="abc" class="box" title="标题" age="18" height="1.88">
    我是box
  </div>

  <input type="checkbox" checked>

  账号: <input type="text" class="account">
  <button class="btn">设置input的值</button>

 // 通过property获取attribute的值
    // 获取box元素
    var boxEl = document.querySelector(".box")

    console.log(boxEl.id, boxEl.title, boxEl.age, boxEl.height)

    // input元素
    var inputEl = document.querySelector("input")
    // if (inputEl.getAttribute("checked")) {
    //   console.log(input选中状态)
    // }
    if (inputEl.checked) {
      console.log('input选选中状态')
    }

    // 2. attribute和property是相互影响的
    boxEl.id = "aaaaa"
    console.log(boxEl.getAttribute("id"))

    boxEl.setAttribute("title", "哈哈哈")
    console.log(boxEl.title)

    // 3. 比较特殊的情况input设置值 (了解一下)
    var accountInputEl = document.querySelector(".account")
    // accountInputEl.value = "why"
    // accountInputEl.setAttribute("value", "kobe")
    var btnEl = document.querySelector(".btn")
    btnEl.onclick = function() {
      //  优先级更高
      accountInputEl.value = "why"
      // accountInputEl.setAttribute("value", "kobe")
    }

2.5. class和style

2.5.1. class和style用法区别

有时候我们会通过JavaScript来动态修改样式, 这个时候我们有两个选择
- 选择一: 在css中编写好对应的样式, 动态添加class
- 选择二: 动态的修改style属性
开发中如何选择
- 在大多数情况下, 如果可以动态修改class完成某个功能, 更推荐使用动态calss
- 如果对于某些情况, 无法通过动态修改class, (比如精准修改某个css属性的值, 那么就可以修改style
元素的class attribute，对应的property并非叫class，而是****className：
- 这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className；
- 虽然现在JavaScript已经没有这样的限制，但是并不推荐，并且依然在使用className这个名称；
我们可以对className进行赋值，它会替换整个类中的字符串。
如果我们需要添加或者移除单个的class，那么可以使用classList属性。

 // 1. 获取box
    var boxEl = document.querySelector(".box")
    // 2. 监听点击
    var counter = 1
    boxEl.onclick = function() {
      // 直接修改style  
      // boxEl.style.color = "red"
      // boxEl.style.fontSize = "24px"
      // boxEl.style.backgroundColor = "green"

      // 动态的添加某一个class
      boxEl.className = "active"

      // 动态修改boxEl的宽度
      boxEl.style.width = 100 * counter + "px"
      counter++
    }

2.5.2. className、classList

elem.classList 是一个特殊的对象：
- elem.classList.add (class) ：添加一个类
- elem.classList.remove(class)：添加/移除类。
- elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。
- elem.classList.contains(class)：检查给定类，返回 true/false。

◼ classList是可迭代对象，可以通过for of进行遍历。

 .active {
      color: #fff;
      background-color: #f80;
      font-size: 25px;
    }

<div class="box">
    我是box
  </div>
  <button>切换</button>

 var boxEl = document.querySelector(".box")
    var btnEl = document.querySelector("button")

    // 1. 方法一" className
    // boxEl.className = "abc"

    // 2. 方法二: classList
    // 添加
    boxEl.classList.add("abc")
    boxEl.classList.add("active")
    // 移除
    boxEl.classList.remove("abc")
    
    // 需求, 让box在active之间进行切换
    btnEl.onclick = function() {
      // 方法一: 添加移除
      // if(boxEl.classList.contains("active")) {
      //   boxEl.classList.remove("active")
      // } else {
      //   boxEl.classList.add("active")
      // }

      // 方法二: toggle
      boxEl.classList.toggle("active")
    }

2.5.3. style的用法

驼峰写法
设置空字符串使用默认值
cssText（了解）

如果需要单独修改某一个CSS属性，那么可以通过style来操作：
- 对于多词（multi-word）属性，使用驼峰式 camelCase
- 如果我们将值设置为空字符串，那么会使用CSS的默认样式：
多个样式的写法，我们需要使用cssText属性：
- 不推荐这种用法，因为它会替换整个字符串；

 var boxEl = document.querySelector(".box")

    // 在property中使用驼峰格式
    // console.log(boxEl.style)

    // 如果将一个属性值, 设置为空字符串, 那么使用默认值
    // boxEl.style.display = ""
    // boxEl.style.fontSize = ""

    // 设置多个样式
    // boxEl.style.fontSize = "30px"
    // boxEl.style.color = "red"
    boxEl.style.cssText = "font-size: 30px; color: red;"

2.5.4. getComputedStyle方法

如果我们需要读取样式：
- 对于内联样式，是可以通过style.*的方式读取到的;
- 对于style、css文件中的样式，是读取不到的；
这个时候，我们可以通过getComputedStyle的全局函数来实现：

var boxEl = document.querySelector(".box")
    console.log(boxEl.style.backgroundColor)
    // console.log(boxEl.style.fontSzie)

    // 
    console.log(getComputedStyle(boxEl).fontSize)

2.6. dataset（掌握）

data-* -> dataset

前面我们有学习HTML5的data-*自定义属性，那么它们也是可以在dataset属性中获取到的

 var boxEl = document.querySelector(".box")
    // 小程序开发中使用
    console.log(boxEl.dataset.age)
    console.log(boxEl.dataset.height)

    boxEl