【前端】JavaScript DOM API

DOM API

Document Object Model

文档对象模型

Application Programming Interface

应用程序编程接口

可以用来操控网页的页面结构

document

代表网页的一个对象 名为 document

这个 document 对象中有许多函数

这些函数就是 api 接口（工具的意思）

可以用来修改

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

DOM 树

文档

一个页面就是一个 文档

使用 document 表示

元素

页面中所有的标签都称为 元素

使用 element 表示

节点

网页中所有的内容都可以称为 节点

标签节点、注释节点、文本节点、属性节点......

使用 node 表示

获取元素

querySelector

let element = document.querySelector("选择器");

选取一个标签

返回一个标签对象

 querySelectorAll

let elements = document.querySelectorAll("选择器");

选取所有符合的标签

返回一个标签对象列表

事件

事件源

哪个元素触发的

事件类型

是点击 选中 还是修改

事件处理程序 

进一步如何处理

<button id="btn">点我一下</button>

<script>

    let btn = document.querySelector('#btn');

    btn.onclick = function () {

        alert("hello world");

    }

</script>

• 事件源  btn 按钮
• 事件类型  点击
• 事件处理程序  匿名函数  function

btn.onclick = function()

这个操作称为

注册事件 / 绑定事件

操作元素

获取 / 修改元素内容

innerText

Element.innerText

表示一个节点及其后代的“渲染”文本内容

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

// 写操作
HTMLElement.innerText = string;

innerHTML

Element.innerHTML

设置或获取 HTML 语法表示的元素后代

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

// 写操作
element.innerHTML = htmlString;

innerHTML 与 innerText 相比

不仅可以修改文本，还能修改页面结构

获取 / 修改元素属性

查看 Element 对象中的属性

<img src="female.jpg" alt="女性" title="女孩">

<script>

    var img = document.querySelector('img');
    console.dir(img);

</script>

可以通过 JavaScript

来直接修改这些属性

img.onclick = function () {
    if (img.src.indexOf("female.png") !== -1) {
        img.src = "../img/male.png";
        img.alt = "男性";
        img.title = "男孩";
    } else {
        img.src = "../img/female.png";
        img.alt = "女性";
        img.title = "女孩";
    }
}

获取 / 修改表单元素属性

表单

主要是指 input 标签

以下属性都可以通过 DOM 来修改

• value：input 的值
• type：input 的类型
• checked：复选框默认选择
• selected：下拉框选默认选择

获取 / 修改样式属性

行内样式操作

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

类名样式操作

element.className = CSS 类名;

操作节点

• 创建元素节点
• 把元素节点插入到 dom 树中

创建节点

createElement

创造元素节点

options 参数可不填

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

createTextNode

创建文本节点

var element = document.createTextNode(文本);

createComment

创建注释节点

var element = document.createComment(注释);

createAttribute

创建属性节点

var element = document.createAttribute(属性);

插入节点

appendChild

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

element.appendChild(child);

insertBefore

将节点插入到指定节点之前

parentNode.insertBefore(newNode, referenceNode);

• parentNode 新插入节点的父节点
• newNode 用于插入的节点
• referenceNode newNode 将要插在这个节点之前

删除节点

removeChild

element.removeChild(child);

• child 为待删除节点
• element 为 child 的父节点
• 返回值为该被删除节点
• 被删除节点只是从 dom 树被删除了  但是仍然在内存中  可以随时加入到 dom 树的其他位置
• 如果上例中的 child 节点不是 element 节点的子节点  则该方法会抛出异常