JavaScript学习-基础篇｜ 青训营笔记

用户8810470487760
748 阅读6分钟
  • “这是我参与「第四届青训营 」笔记创作活动的的第3天”

DOM

文档对象模型

image-20220217093429831.png

节点（Node)

节点分类

  1. 文档节点：整个HTML文档
  2. 元素节点：HTML文档中的HTML标签
  3. 属性节点：元素的属性
  4. 文本节点：HTML标签的文本内容

image-20220217093600491.png

节点属性

image-20220217093724382.png

DOM查询

获取元素节点

通过document对象调用

  1. getElementById()：通过id属性获取一个元素节点对象
  2. getElementsByTagName()：通过标签名获取一组元素节点对象，返回一个类数组对象
  3. getElementsByName()：通过name属性获取一组元素节点对象，返回一个类数组对象
  4. getElementsByClassName()：通过class属性获取一组元素节点对象，返回一个类数组对象

获取元素节点子节点

通过具体元素节点调用

  1. getElementsByTagName()：方法，返回当前节点的指定标签名后代节点
  2. childNodes：属性，表示当前节点的所有子节点（所有类型节点，不只是元素节点，换行会被识别为文本节点）
  3. children：属性，表示当前节点所有元素节点
  4. firstChild：属性，表示当前节点第一个子节点（所有类型节点，不只是元素节点，换行会被识别为文本节点）
  5. firstElementChild：属性，表示当前节点第一个子元素节点
  6. lastChild：属性：表示当前节点最后一个子节点（所有类型节点，不只是元素节点，换行会被识别为文本节点）

获取父节点和兄弟节点

通过具体节点调用

  1. parentNode：属性，表示当前节点父节点（一定为单元素节点）
  2. previousSibling：属性，表示当前节点前一个兄弟节点
  3. previousElementSibling：属性，表示当前节点前一个兄弟元素节点
  4. nextSibling：属性，表示当前节点下一个兄弟节点

其他

  • 获取双标签元素HTML内容：Element.innerHTML（单标签无法使用）

  • 获取双标签元素文本内容：Element.innerText（结果无标签，其他与Element.innerHTML一样）

  • 读取元素属性

    • 非class的属性：Element.属性
    • class属性：Element.className

  • 获取body标签：document.body

  • 获取html标签：document.documentElement

  • 获取页面所有元素：document.all或者document.getElementByTagName("*")

  • 根据CSS选择器查询元素节点对象：

    • document.querySelector()（使用该方法只会返回第一个符合条件的元素）
    • document.querySelectorAll()(以类数组的形式返回所有符合条件的元素)

DOM增删改

通过document对象调用

  • creatElement()：创建元素节点
  • creatTextNode()：创建文本节点

通过具体节点调用

  • appendChild()：把新的子节点添加到指定节点（父节点调用）
  • removeChild()：移除子节点（父节点调用）
  • 子节点.parentNode.removeChild(子节点)：移除节点（子节点调用）
  • replaceChild(newNode, oldNode)：替换子节点（父节点调用）
  • insertBefore(newNode, oldNode)：在指定子节点之前插入新的子节点（父节点调用）
var newLi = document.creatElement("li")
var newText = document.creatTextNode("广州")
newLi.appendChild(newText)
//先构造元素节点和文本节点，然后将文本节点加入到元素节点中，这样就构成一个完整的DOM元素
var newLi = document.creatElement("li")
newLi.innerHTML = "广州"
//构造元素节点，修改innerHTML属性更改其文本内容

DOM操控CSS

处理内联样式（标签内的样式）

  • 设置：元素.style.样式名 = 样式值
  • 读取：元素.style.样式名

注意：css样式含-时，样式名修改为驼峰命名法

存在的问题：

1. 每修改一次，就会重新渲染一次页面
2. 大量修改时麻烦
3. CSS与JS耦合了，不易迭代

解决方式：直接修改元素的class属性，间接修改

处理当前显示的样式

  • 设置：getComputedStyle(要获取的元素对象, 伪元素).样式名 = 样式值
  • 读取：getComputedStyle(要获取的元素对象, 伪元素).样式名 = 样式值

注意：伪元素部分可以用null

其他（只读，不可修改）

client

  • 元素.clientHeight：获取元素可见高度；包括内容区和内边距；纯数字，无单位
  • 元素.clientWidth：获取元素可见宽度；包括内容区和内边距；纯数字，无单位

offset

  • 元素.offsetHeight：获取元素整体高度；包括内容区、内边距和边框；纯数字，无单位
  • 元素.offsetWidth：获取元素整体宽度；包括内容区、内边距和边框；纯数字，无单位
  • 元素.offsetParent：获取离元素最近的定位元素；无定位元素时，返回body
  • 元素.offsetLeft：获取元素相对于其定位元素的水平偏移量
  • 元素.offsetTop：获取元素相对于其定位元素的垂直偏移量

scroll

  • 元素.scrollHeight：获取元素滚动区域高度

  • 元素.scrollWidth：获取元素滚动区域宽度

  • 元素.scrollLeft：获取水平滚动条滚动距离

  • 元素.scrollTop：获取垂直滚动条滚动距离

    注：

    1. CSS设置overflow: auto进行滚动
    2. 满足scrollHeight -scrollTop = clientHeight时，垂直滚动条到底
    3. 满足scrollWidth -scrollLeft = clientWidth时，水平滚动条到底

事件

  • 用户和浏览器的交互行为

    eg：点击、鼠标移动、按下键盘那某个键等

响应事件

  • 用为对应事件绑定相应处理函数的形式来相应事件
<button id="btn">Click</button>
<script type="text/javascript">
    /*获取元素对象*/
    var btn = document.getElementById("btn");
   /*绑定事件，创建一个响应函数*/
    btn.onclick = function(){
        alert("Click");
    }
</script>
  • 事件响应函数中，响应函数是给谁绑定的，this就是谁

事件对象

  • 事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传入响应函数

事件的冒泡

  • 指向上传导，当后代元素事件被触发时，祖先元素的相同事件也会被触发
  • 大部分开发中，冒泡是有用的
  • 取消冒泡：event.cancelBubble = true

事件的委派

  • 只绑定一次事件，可以应用到多个元素上，即使元素是后添加的
  • 将事件统一绑定给共同的祖先元素（冒泡的应用）
  • 判断触发事件的类型来决定是否启动响应函数：event.target

事件的绑定

  • 使用对象.事件 = 函数的形式绑定响应函数时，同时只能为一个元素的一个事件绑定一个响应函数，绑定多个时，后面的会覆盖前面的

  • 对象.addEventListener()

    • 三个参数

      • 事件字符串，不带on
      • 响应函数（回调函数）
      • 是否在捕获阶段触发事件，一般为false

    • 可以同时为一个元素的相同事件同时绑定多个响应函数，调用顺序与函数绑定顺序一致

    • 可以和对象.事件 = 函数同时使用

事件的传播

  • 事件传播分成三个阶段

    1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件

    2.目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件

    3.冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

  • 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true（一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false）

avatar
文章
阅读
粉丝