JavaScript — DOM API

p1

p2

p3

操作元素

---

获取 / 修改元素内容

innerHTML 用的场景比 innerText 更多

innerText

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

读操作 —— var renderedText = HTMLElement.innerText;

写操作 —— HTMLElement.innerText = string;

举例:

缺点: 若是修改内容时，带一些 html 的标签作为字符串，此时不会把标签渲染成 html 的元素 (不识别 html 标签)

由上述例子可以看到，通过 innerText 无法获取到 div 内部的 html 结构，只能得到文本内容； 修改页面的时候也会把 span 标签当成文本进行设置，不会渲染为 html 结构

innerHTML

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

读操作 —— var content = element.innerHTML;

写操作 —— element.innerHTML = htmlString;

通过 innerHTML 获取到的字符串， 不光能获取到页面的 html 结构，同时也能修改结构；并且获取到的内容保留空格和换行

获取 / 修改元素属性

可以通过 Element 对象的属性来直接修改，就能影响到页面显示效果

举例:

console.dir() 表示，将一个对象中的属性、方法打印出来

修改 img 的 src 属性:

打开网页的时候，最开始是 xiawen2.jpg，还没有等我们反应过来时，就已经变成了 xiawen.jpg，因为执行的速度非常快

点击图片，切换为另一张图片:

获取 / 修改样式属性

CSS 中指定给元素的属性，都可以通过 JS 来修改

行内样式操作

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

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

“行内样式”，通过 style 直接在标签上指定的样式，优先级很高；适用于改的样式少的情况

举例:

一朵花花

点击修改颜色:

// 点击后修改颜色

var div = document.querySelector(‘div’);

div.onclick = function () {

// 获取 div 标签文本颜色

var curColor = div.style.color;

if(curColor == ‘’ || curColor == ‘black’){

div.style.color = “red”;

}

else{

div.style.color = “black”;

}

}

类名样式操作

element.className = [CSS 类名];

修改元素的 CSS 类名，适用于要修改的样式很多的情况

夜间模式切换

花花呀

由于 class 是 JS 的保留字，所以名字叫做 className

获取 / 修改表单元素属性

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

• value： input 的值

• disabled：禁用

• checked：复选框会使用

• selected：下拉框会使用

• type：input 的类型(文本，密码，按钮，文件等)

例1 — 切换按钮的文本

// 选择按钮元素，绑定点击事件，切换显示的文版内容

var btn = document.querySelector(“#bf”);

btn.onclick = function(){

var content = btn.value;

if(content == ‘播放’) {

btn.value = ‘暂停’;

}else{

btn.value = ‘播放’;

}

}

例2 — 点击按钮，文本值+1

var sum = document.querySelector(“#sum”);

var sumBtn = document.querySelector(“#sum_btn”);

sumBtn.onclick = function(){

var count = +sum.value; //返回字符串

console.log(count); // 转换成数值

sum.value = count + 1;

}

例3 — 全选 / 取消全选按钮

在 HTML 中，属性值设为 “checked” 为选中；而在 JS 中，需要设置为 true / false

全部选中

艾希

凯特琳

VN

// 全部选择 / 取消

var all = document.querySelector(“#all”);

all.onclick = function(){

//子复选框

var items = document.querySelectorAll(“.item”);

if(all.checked){

for(item of items){

item.checked = true;

}

}

else{

for(item of items){

item.checked = false;

}

}

}

优化用户体验：

var all = document.querySelector(“#all”);

var items = document.querySelectorAll(“.item”);

all.onclick = function(){

console.log(all.checked);

for(item of items){

item.checked = all.checked;

}

}

for(item of items){

item.onclick = function(){

// all 复选框是否被选中

let allChecked = true;

// 所有子复选框是否被选中

for(it of items){

if(!it.checked){

allChecked = false;

}

}

all.checked = allChecked;

}

}

操作节点

---

新增节点

分成两个步骤

1. 创建元素节点

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

1.创建元素节点

可以直接在最后的元素后创建

内容

var add = document.querySelector(“#add”);

var content = document.querySelector(“#content”);

var container = document.querySelector(“#container”);

add.onclick = function(){

// 点击，获取文本框内容

var text = content.value;

// innerHTML ,先获取 container 中的所有元素，在最后添加元素

var html = container.innerHTML;

html += “

”;

html += text;

html += “

”;

container.innerHTML = html;

}

但以上修改 container 中的所有内容，效率比较差，已有的标签已经渲染了，重新设置又会再次渲染

可以使用 createElement 方法来创建一个元素

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

var add = document.querySelector(“#add”);

var content = document.querySelector(“#content”);

var container = document.querySelector(“#container”);

add.onclick = function(){

var text = content.value;

// 方式2

// 创建一个dom元素(

)，然后添加到 container 中，作为最后一个子节点

var p = document.createElement(“p”); // 创建一个元素

p.innerHTML = text;

container.appendChild§; //添加到dom树形结构中，作为最后一个子节点

}

2.插入节点到 DOM 树中

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

element.appendChild(aChild)

.

DOM 包含的子节点不动，在最后添加 element 节点，效率比较高

仍以上述为例:

container.appendChild§; —— 添加到dom树形结构中，作为最后一个子节点

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

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

.

含义: 在 parentNode 节点中，有一个 insertedNode 的子节点，在这个子节点前，插入一个 newNode 节点

• insertedNode 被插入节点(newNode)

• parentNode 新插入节点的父节点

• newNode 用于插入的节点

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

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

注意: referenceNode 引用节点不是可选参数

补充:

DOM 对象，其中包含属性:

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。