前端JavaScript（WebAPI）

目录

关于WebAPI

DOM树

获取元素

事件

事件三要素

操作元素

获取/修改元素内容

获取/修改元素属性

获取/修改表单元素属性

获取/修改样式属性

行内样式操作

类名样式操作

操作节点

新增节点

创建元素节点

插入节点到dom树中

删除节点

---

👉JavaScript语法👈

关于WebAPI

JS 分成三个大的部分

ECMAScript: 基础语法部分

DOM API: 操作页面结构

BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM

DOM树

获取元素

querySelector

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
    let elem1 = document.querySelector('.box');
    console.log(elem1);
    let elem2 = document.querySelector('#id');
    console.log(elem2);
    var elem3 = document.querySelector('h3 span input');
    console.log(elem3);
</script>

selectors包含一个或多个要匹配的选择器的DOM字符串DOMString，该字符串必须是有效的CSS字符串

表示文档中与指定的一组CSS选择器匹配的第一个元素的html元素Element对象

如果需要与指定选择器匹配的所有元素列表，应该使用querySelectorAll()

可以在任何元素上调用，不仅仅是document，调用这个方法的元素将作为本次查找的根元素

querySelectorAll

<div class="box">abc</div>
<div id="id">def</div>
<script>
    let elems = document.querySelectorAll('div');
    console.log(elems);
</script>

事件

概念

JS 要构建动态页面, 就需要感知到用户的行为.

用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作

事件三要素

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进一步如何处理. 往往是一个回调函数

<button id="btn">点我一下</button>
<script>
    let btn = document.getElementById('btn');
    btn.onclick = function () {
        alert("hello world");
    }
</script>

btn 按钮就是事件源.

点击就是事件类型

function 这个匿名函数就是事件处理程序

其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

操作元素

获取/修改元素内容

innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

不能识别html标签

// 读操作
let renderedText = HTMLElement.innerText;
// 写操作
HTMLElement.innerText = string;

<div>
    <span>hello world</span>
</div>
<script>
    let div = document.querySelector('div');
    // 读取 div 内部内容
    console.log(div.innerText);
    // 修改 div 内部内容, 界面上就会同步修改
    div.innerText = 'hello js';
</script>

nnerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代.

// 读操作
let content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
</script>
//效果是把div标签里的全部内容换了

获取/修改元素属性

我们可以在代码中获取属性的值

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    let img = document.querySelector('img');
    // console.dir(img);
    console.log(img.src);
    console.log(img.title);
    console.log(img.alt);
</script>

 还可以直接修改属性

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    let img = document.querySelector('img');
    img.onclick = function () {
        if (img.src.lastIndexOf('rose.jpg') !== -1) {
            img.src = './rose2.png';
        } else {
            img.src = './rose.jpg';
        }
    }
</script>

获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

value: input 的值.

disabled: 禁用

checked: 复选框会使用

selected: 下拉框会使用

type: input 的类型(文本, 密码, 按钮, 文件等）

切换按钮的文本

<input type="button" value="播放">
<script>
    let btn = document.querySelector('input');
    btn.onclick = function () {
        if (btn.value === '播放') {
            btn.value = '暂停';
        } else {
            btn.value = '播放';
        }
    }
</script>

获取/修改样式属性

行内样式操作

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];

点击文字则放大字体

<div style="font-size: 20px; font-weight: 700;">
    哈哈
</div>
<script>
    let div = document.querySelector('div');
    div.onclick = function () {
        let curFontSize = parseInt(this.style.fontSize);
        curFontSize += 10;
        this.style.fontSize = curFontSize + "px";
    }
</script>

类名样式操作

element.className = [CSS 类名];

开启夜间模式

<div class="container light">
    这是一大段话. <br>
    这是一大段话. <br>
    这是一大段话. <br>
    是一大段话. <br>
</div>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        height: 100%;
    }
    .container {
        width: 100%;
        height: 100%;
    }
    .light {
        background-color: #f3f3f3;
        color: #333;
    }
    .dark {
        background-color: #333;
        color: #f3f3f3;
    }
</style>
<script>
    let div = document.querySelector('div');
    div.onclick = function () {
        console.log(div.className);
        if (div.className.indexOf('light') != -1) {
            div.className = 'container dark';
        } else {
            div.className = 'container light';
        }
    }
</script>

操作节点

新增节点

分成两个步骤

1. 创建元素节点

2. 把元素节点插入到 dom 树中.

创建元素节点

createTextNode 创建文本节点

createComment 创建注释节点

createAttribute 创建属性节点

createElement 创建元素节点

<div class="container">

</div>
<script>
    let div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    console.log(div);
</script>

插入节点到dom树中

appendChild

使用 appendChild 将节点插入到指定节点的最后一个孩子之后

<div class="container">

</div>
<script>
    let div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    
    let container = document.querySelector('.container');
    container.appendChild(div);
</script>

效果

insertBefore

使用 insertBefore 将节点插入到指定节点之前.

insertedNode 被插入节点(newNode)

parentNode 新插入节点的父节点

newNode 用于插入的节点

referenceNode newNode 将要插在这个节点之前

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾.

如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.

<div class="container">
    <div>11</div>
</div>
<script>
    let newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的节点';
    let container = document.querySelector('.container');
    console.log(container.children);
    container.insertBefore(newDiv, container.children[0]);
</script>

效果

删除节点

removeChild

oldChild = element.removeChild(child);

child 为待删除节点

element 为 child 的父节点

返回值为该被删除节点

被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置.

如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常.