JavaScript 关于API的简单部分语法

JavaScript(WebAPI)

的 JS 分成三个大的部分

• ECMAScript: 基础语法部分
• DOM API: 操作页面结构
• BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM

DOM 基本概念

什么是 DOM

DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

• 网页内容
• 网页结构
• 网页样式

DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树.

树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 “家谱” 这种结构

重要概念:

• 文档: 一个页面就是一个 文档, 使用 document 表示.
• 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
• 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

这些文档等概念在 JS 代码中就对应一个个的对象.

所以才叫 "文档对象模型

获取元素

这部分工作类似于 CSS 选择器的功能.

querySelector

querySelector是document对象的属性

document : 页面中的全局对象,一个页面加载好了,就会自动生成一个全局变量,叫做document 这里面就有一些属性和方法,让我们来操作页面的内容

var element = document.querySelector(selectors);

<div>hello</div>
<script>
    let obj = document.querySelector('div');
    console.log(obj);
</script>

而使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象.

• selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常
• 表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
• 如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()
• 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
<script>
        let obj = document.querySelector('ul li');
        console.log(obj);
</script>

当querySelector匹配到多个元素的时候,此时返回的对象,就是匹配到的所有被选中的第一个元素

此时,如果想将所有的li都选择,就需要使用querySelectotAll ,此时返回的就是一个数组

querySelectotAll

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
<script>
    let obj = document.querySelectorAll('ul li');
    console.log(obj);
</script>

事件初识

JS中的很多代码都是通过"事件"来触发的

事件就是浏览器对于用户的操作行为进行一个统称(准确来说,事件不一定全是由用户操作产生,但是大部分是)

例如:鼠标在页面上移动,就会产生鼠标移动事件

鼠标在页面某处点击,就会产生鼠标点击事件

鼠标滚轮,来滚动页面,就会产生滚动事件

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

2. 事件类型: 是点击, 选中, 还是修改? 比如鼠标移动,鼠标点击,鼠标滚轮

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

最常见的就是点击事件

<button>按钮</button>
<script>
    let button = document.querySelector('button');
    button.onclick = function() {
         alert('hello');
    }
</script>

点击之后就会出现hello

操作元素

操作元素内容

通过对象里面的属性innerHTML来实现

<div>hello world</div>
<button>按钮</button>

<script>
    let btn = document.querySelector('button');
    btn.onclick = function() {
        let obj = document.querySelector('div');
        console.log(obj.innerHTML);
    }
</script>

点击按钮之后,就会在控制台输出获取从对象获取到的元素

单标签没有这个属性

操作表单元素属性

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

• value: input 的值.
• disabled: 禁用
• checked: 复选框会使用
• selected: 下拉框会使用
• type: input 的类型(文本, 密码, 按钮, 文件等)

代码示例: 切换按钮的文本

假设这是个播放按钮, 在 “播放” - “暂停” 之间切换

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

变化不好截图,就自己写一下吧

代码示例: 点击计数

使用一个输入框输入初始值(整数). 每次点击按钮, 值 + 1

<input type="text" id="text" value="0">
<input type="button" id="btn" value='点我+1'>
<script>
    let text = document.querySelector('#text');
    let btn = document.querySelector('#btn');
    btn.onclick = function() {
        let num = text.value;
        num = parseInt(num);
        num = num + 1;
        text.value = num;
        console.log(num);
    }
</script>

注意:在js代码中获取到的value需要使用parseInt转成int类型,否则就会当做sting类型进行拼接

下图就是未转换时的结果

代码示例: 全选/取消全选按钮

1. 点击全选按钮, 则选中所有选项

2. 只要某个选项取消, 则自动取消全选按钮的勾选状态

<input type="checkbox" id="all">我全都要<br>
<input type="checkbox" id="girls">貂蝉<br>
<input type="checkbox" id="girls">妲己<br>
<input type="checkbox" id="girls">西施<br>
<input type="checkbox" id="girls">小乔
<script>
    let all = document.querySelector('#all');
    let girls = document.querySelectorAll('#girls');
    all.onclick = function() {
        for (let i = 0; i < girls.length; i++) {
            girls[i].checked = all.checked;
        }
    }

    for (let i = 0; i < girls.length; i++) {
        girls[i].onclick = function() {
            all.checked = checkGirls(girls);
        }
    }

    function checkGirls(girls) {
        for (let i = 0; i < girls.length; i++) {
            if (!girls[i].checked) {
                return "";
            }
        }
        return 'checked';
    }
</script>

操作元素样式

行内样式操作

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

代码示例: 点击文字则放大字体.

style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.

例如: font-size => fontSize, background-color => backgroundColor 等

这种方式修改只影响到特定样式, 其他内联样式的值不变

<div style="font-size: 20px;">这是一段文字</div>

<script>
    let div = document.querySelector('div');
    div.onclick = function() {
        let size = parseInt(div.style.fontSize);
        size += 5;
        div.style.fontSize = size + 'px';
        console.log(size);
    }
</script>

类名样式操作

element.className = [CSS 类名];

代码示例: 开启夜间模式

<style>
    * {
        padding: 0;
        margin: 0;
    }
        
    .light {
        background-color: #fff;
        color: #000;
    }
        
    .dark {
        background-color: #000;
        color: #fff;
    }
</style>
<div class="light" style="height: 200px;">这是一段文字</div>
<button>关灯</button>

<script>
    let div = document.querySelector('div');
    let button = document.querySelector('button');
    button.onclick = function() {
        if (div.className == 'light') {
            div.className = 'dark';
            button.innerHTML = '开灯';
        } else if (div.className == 'dark') {
            div.className = 'light';
            button.innerHTML = '关灯';
        }
    }
</script>

操作节点

新增节点

分成两个步骤

1. 创建元素节点

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

使用 createElement 方法来创建一个元素. options 参数暂不关注

 var element = document.createElement(tagName[, options]);

<div class="container">
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.id = 'newdiv';
    newDiv.className = 'one';
 	div.innerHTML = 'hehe';
    console.log(newDiv);
</script>

此时发现, 虽然创建出新的 div 了, 但是 div 并没有显示在页面上. 这是因为新创建的节点并没有加入到

DOM 树中.

上面介绍的只是创建元素节点, 还可以使用:

• createTextNode 创建文本节点
• createComment 创建注释节点
• createAttribute 创建属性节点

我们以 createElement 为主即可.

插入节点到 dom 树中

使用appendChild把节点插入某个节点的子节点中

<div class="container">
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.id = 'newdiv';
    newDiv.className = 'one';
 	div.innerHTML = 'hehe';
    console.log(newDiv);
	let container = document.querySelector('.container');
    container.appendChild(newDiv);
</script>

删除节点

使用removeChild方法实现

<div class="container">
<button>删除div</button>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.id = 'newdiv';
    newDiv.className = 'one';
 	div.innerHTML = 'hehe';
    console.log(newDiv);
	let container = document.querySelector('.container');
    container.appendChild(newDiv);
    button.onclick = function() {
         container.removeChild(newDiv);
    }
</script>