小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

一、js 基础

文章整体就是个大型笔记。

1. DOM

w3c DOM 文档

www.runoob.com/jsref/dom-o…

1. 查找节点

查找 Id查找节点，返回该 id 的节点

document.getElementById('id')

通过标签名查找节点，以数组形式返回所有查找到的节点

document.getElementByTagName('标签名')

通过 name 查找节点，以数组形式返回

document.getElementByName('name')

通过 class 查找节点，同样以数组形式返回所有同类节点

document.getElementByClassName('class')

通过样式查找；是上面语法的集合体

document.querySelector("样式")

通过样式查找全部

document.querySelectorAll("样式")

获取整个页面的节点

document.documentElement

2. 获取节点

.childNodes[可选长度] 获取子节点，可指定长度以准确获取子节点
.parentNode 获取父节点

.firstChild 获取第一个节点
.lastChild 获取最后一个节点

.previousSibling 获取上一个节点
.nextSibling 获取下一个节点

3. 修改节点

.textContent

获取或设置节点的文本

.innerHtm

暴力修改节点内容，插入的 HTML 内容会被解析

.appendChild(对象)

将对象或文本内容插入到指定节点当中

.className = ''

修改节点的样式名

classList.add('')

追加样式名

.style = ''

修改样式

.style.指定样式 = ''

修改指定样式；带有斜杠的样式需改为大写：backgroundColor = 'red'

.setAttribute('属性名', '属性值')

添加或修改属性值

4. 增删节点

.removeChild[可选长度]

删除节点下的子元素

.remove()

删除所有子节点

document.createElement('创建对象')

// 创建一个 div

document.createElememnt('div')

document.createTextNode('文本内容')

// 创建一行文本

document.createTextNode('我是被创建的文本')

2. BOM

w3c BOM 文档

www.runoob.com/jsref/dom-o…

1. 定时器

定时器：

setInterval('执行代码', 时间)

关闭定时器：

var set = setTimeout(function(), 100)

clearInterval(set)

只执行一次的定时器：

setTimeout('执行代码', 时间)

关闭执行一次的定时器：

var set = setTimeout(function(), 100)

clearTimeout(set)

2. 键盘事件

keydown

按下键盘时

keypress

按下键盘

keyup

抬起时

3. 常用事件

鼠标单击事件：onclick
元素获取焦点事件：onfocus

元素失去焦点事件：onblur
鼠标经过事件：onmouseover

鼠标离开事件：onmouseout
表单提交事件：onsubmit

页面加载完毕事件：onload
鼠标移过事件：onmousemov

内容变化事件：onchang
鼠标双击事件：ondblclick

鼠标按键按下时：onmousedown

4. ajax 与 json

w3c AJAX 文档

www.runoob.com/ajax/ajax-t…

1. 创建 ajax 请求

创建 xhr 对象

let xhr = new XMLHttpRequest()

建立传输请求

xhr.open('请求地址')

请求头设置

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

发送数据

xhr.send(数据)

监听请求状态

onreadystatechange = function(){}

ajax 文件上传进度监听

xhr.upload.onprogress = function(ev){}

// 不重要

isTrusted: true,

// 不重要

lengthComputable: true,

// 目前已上传的文件数量

loaded: 2130896,

// 上传文件总大小

total: 2130896,

// 不重要

type: "progress",

// 上传进度计算
xhr.upload.onprogress = function(ev){
  // 获取当前进度
  let jd = 100 * ev.loaded / ev.total
  // 上传进度条
  document.getElementById('prog').style.width = jd + '%'
  // 上传百分比
  document.getElementsByTagName('span')[0].innerText = Math.ceil(jd) + '%'
}

readyState 请求状态码含义

- 0：xhr 对象已被创建，但未调用 open
- 1：已经调用了 open 方法，但尚未发送请求

- 2：请求已经发送出去了（发送请求）
- 3：可以接受部分数据（请求处理中）

- 4：已经接受了所有数据，请求已经关闭（请求完成）

Status 请求状态
StatusText 请求状态文本

2. json 数据转换

// 将 JSON 字符串转换为 js 能够识别的对象

JSON.parse()

// 将 js 对象转为 JSON 字符串

JSON.stringify()

5. 正则

w3c RegExp 对象文档

www.runoob.com/jsref/dom-o…

1. 正则 api

将匹配到的结果存为数组返回，无匹配内容返回 null

正则.exec(对象)

能够匹配到结果则返回 true，反之返回false

正则.text(对象)

2. JavaScript api

返回查到的第一个值的位置

查找对象.search(查找目标或是正则)

返回匹配到的一个或多个值

查找对象.match(查找目标或是正则)

查找并替换字符串内容

查找对象.replace(查找目标或是正则)

分割字符串并将分割结果以数组形式返回

字符对象.split(任意字符串或正则, 可选长度)

二、js 进阶

Dom.addEventListener()

监听对象指定的事件，当事件指定的事件触发时则返回回调函数

EventTarget.addEventListener(event, listener, options)

属性：

EventTarget：监听节点
event：监听事件

listener：回调函数
options：指定事件是否在捕获或者冒泡阶段执行

Dom.removeEventListener()

移除 addEventListener() 监听的事件

EventTarget.removeEventListener(event, listener, options)

EventTarget：监听节点
event：监听事件

listener：回调函数
options：指定事件是否在捕获或者冒泡阶段执行

Dom.stopPropagation()

停止事件的捕捉冒泡行为。

Dom.preventDefault()

停止元素默认行为，如 a 标签默认的 href 跳转。

事件捕捉冒泡

事件捕捉冒泡是指在多个元素叠加在一起时，它们事件之间的触发顺序。

捕捉：事件从外里触发。

冒泡：事件从里到外触发。

<!--
 * @Description: 事件捕捉冒泡
 * @Author: CY小尘s
 * @Date: 2021-07-29 17:27:33
 * @LastEditTime: 2021-07-29 17:54:55
 * @LastEditors: 学习
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件捕捉冒泡</title>
    <style>
        /* 捕捉样式 */
        div#Capture1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        div#Capture2{
            width: 250px;
            height: 250px;
            border: 1px solid red;
            margin: 0px auto;
        }
        div#Capture3{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 0px auto;
        }
        /* 冒泡样式 */
        div#Bubble1{
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            margin-top: 10px;
        }
        div#Bubble2{
            width: 250px;
            height: 250px;
            border: 1px solid blue;
            margin: 0px auto;
        }
        div#Bubble3{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <div  id="Capture1" class="Capture">捕捉1
        <div  id="Capture2" class="Capture">捕捉2
            <div  id="Capture3" class="Capture">捕捉3</div>
        </div>
    </div>
    <div id="Bubble1" class="Bubble">冒泡1
        <div id="Bubble2" class="Bubble">冒泡2
            <div id="Bubble3" class="Bubble">冒泡3</div>
        </div>
    </div>
    <script>
        // 模拟 jQuery 的 $ 选择器
        var $ = name => document.querySelector(name)
        // 捕捉事件触发顺序从外到里
        $("#Capture1").addEventListener('click', () => {
            console.log('捕捉1')
        }, true)
        $("#Capture2").addEventListener('click', () => {
            console.log('捕捉2')
        }, true)
        $("#Capture3").addEventListener('click', () => {
            console.log('捕捉3')
        }, true)
        // 冒泡，事件触发顺序从里到外
        $("#Bubble1").addEventListener('click', () => {
            console.log('冒泡1')
        }, false)
        $("#Bubble2").addEventListener('click', () => {
            console.log('冒泡2')
        }, false)
        $("#Bubble3").addEventListener('click', () => {
            console.log('冒泡3')
        }, false)
    </script>
</body>
</html>

效果

事件委托

对父元素进行事件绑定，代替子元素的事件行为的一种方式，能够减少性能消耗以及代码量。例如下方这个案例，在不使用事件绑定，需要添加至少六次事件行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<style>
    ul li {
        list-style: none;
        float: left;
        margin: 0px 20px 20px 0px;
    }
    ul li img{
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <ul>
        <li>
            <img class="img" src="https://www.keaidian.com/uploads/allimg/181206/co1Q206121F4-0-0.jpg" alt="你好">
            <p>你好</p>
        </li>
        <li>
            <img class="img" src="https://www.keaidian.com/uploads/allimg/181206/co1Q206121F4-0-1.jpg" alt="你好">
            <p>你好</p>
        </li>
        <li>
            <img class="img" src="https://www.keaidian.com/uploads/allimg/181206/co1Q206121F4-0-2.jpg" alt="你好">
            <p>你好</p>
        </li>
        <li>
            <img class="img" src="https://www.keaidian.com/uploads/allimg/181206/co1Q206121F4-0-3.jpg" alt="你好">
            <p>你好</p>
        </li>
        <li>
            <img class="img" src="https://www.keaidian.com/uploads/allimg/181206/co1Q206121F4-0-6.jpg" alt="你好">
            <p>你好</p>
        </li>
        <li>
            <img class="img" src="https://www.keaidian.com/uploads/allimg/181206/co1Q206121F4-0-7.jpg" alt="你好">
            <p>你好</p>
        </li>
    </ul>
    <script>
        window.onload = function(){
            // 获取 ul
            let ul = document.querySelector("ul")
            // 给 ul 添加点击事件
            ul.onclick = function(event){
                // 点击图片时触发
                if(event.target.className === 'img'){
                    console.log('点击了 img')
                }
            }
        }
    </script>
</body>
</html>

JavaScript DOM 与 BOM 入门学习

一、js 基础

1. DOM

1. 查找节点

2. 获取节点

3. 修改节点

4. 增删节点

2. BOM

1. 定时器

2. 键盘事件

3. 常用事件

4. ajax 与 json

1. 创建 ajax 请求

2. json 数据转换

5. 正则

1. 正则 api

2. JavaScript api

二、js 进阶

Dom.addEventListener()

Dom.removeEventListener()

Dom.stopPropagation()

Dom.preventDefault()

事件捕捉冒泡

效果

事件委托

效果