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() 表示,将一个对象中的属性、方法打印出来
![哈温呐 加载失败](xiawen2.jpg)
修改 img 的 src 属性:
![哈温呐 加载失败](xiawen2.jpg)
打开网页的时候,最开始是 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;
}
}
新增节点
分成两个步骤
-
创建元素节点
-
把元素节点插入到 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页】前端大厂面试题宝典
最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。