JS核心概念与DOM操作-CSDN博客

本文链接：https://blog.csdn.net/weixin_71893603/article/details/126262847

选择题: (3*15=45)

（JSCORE day07 ES6）函数function indexOf(value, fromi=0){ … } 中包含参数默认值fromi=0，如果浏览器不支持ES6，则在函数内部可用以下哪几种写法等效实现默认值效果:

fromi=fromi||0
fromi===undefined&&(fromi=0)
fromi=fromi&&0
fromi===undefined||fromi=0

答: A B

解析:　答案Ａ. 形参=形参||默认值;

短路

程序执行时:

先判断||之前的形参值是不是有意义的值(隐式转为bool类型不是false的值)

如果||之前的值隐式转为bool后为false，说明用户传入了没有意义的值，或根本就没传值(undefined)，此时根据短路逻辑，会使用||之后的默认值赋值给形参

如果||之前的值隐式转为bool后为true，说明用户传入了一个有意义的值，此时根据短路逻辑，不再使用||之后的值，而是将用户传入的有意义的赋值给形参

答案B. 如果fromi没有传入参数，值就为undefined，前一个条件为true，就会执行后一句话from=0。

（JSCORE day08 ES6 参数增强）以下不是剩余参数语法优点的是:

...收集实参值之后获得的结果是一个纯正的数组，可使用数组类型的所有函数
可有所选择的获得部分实参值
ES6箭头函数支持剩余参数语法
调用函数时不需要传入实参值，形参变量也有默认值使用

答: D

解析:　 a. ...收集实参值之后获得的结果是一个纯正的数组

b. 可有所选择！

c. ES6箭头函数支持...数组名

d. 自定义的数组名都不会太长！

（JSCORE day08 ES6 解构）有对象:

var db={

host:"127.0.0.1",

port:3306,

query(){ … },

}

以下对象解构语法正确的有:

var {host : host, login : login }=db;
var {0 : host, 1 : login }=db;
var { host, login }=db
var [ host, login ]=db

答: A C

解析: 只想用db对象中的host和login，别的我不想要！

只配对变量只配对变量

var {host : host, login : login }=db;

ES6简写:

今后，只要变量名和配对的属性名相同！可只写一个！当两个用！

既配对又当变量既配对又当变量

var { host, login }=db;

（DOM day01 查找元素）不需要查找就可直接获得的元素不包括以下哪种：

<html>
<head>
<form>
<h1>

答: D

解析: 不需要查找就可直接获得: 4种:

(1). <html>元素: document.documentElement

(2). <head>元素: document.head

(3). <body>元素: document.body

(4). <form>元素: document.forms[i]

（DOM day01 查找元素）以下按HTML特征查找函数不正确的有:

var a=document.getElementById(“a1”)
var spans=document.getElementByTagName(“span”)
var txtName=form.getElementsByName(“username”)
var lis=ul.getElementsByClassName(“child”)

答: B C

解析: 按HTML特征查找: 4种:

a. 按id查找一个元素:

var 一个元素对象=document.getElementById("id名")

b. 按标签名查找多个元素:

var 类数组对象=任意父元素.getElementsByTagName("标签名")

c. 按class名查找多个元素:

var 类数组对象=任意父元素.getElementsByClassName("class名")

d. 按name名查找多个表单元素:

var 类数组对象=document.getElementsByName("name名")

（DOM day01 查找元素）以下按节点间关系查找的属性中会收到看不见的空字符干扰的属性是:

元素.parentElement
元素.childNodes
元素.firstElementChild
元素.lastElementChild

答: B

解析: 旧节点树: 父子关系:

i. 元素.parentNode 访问当前元素的父元素

ii. 元素.childNodes 访问当前元素的所有直接子元素

iii. 元素.firstChild 获得当前元素的所有直接子元素中第一个直接子元素

iv. 元素.lastChild 获得当前元素的所有直接子元素中最后一个直接子元素

缺点: 看不见的空字符会极大的干扰查找！

新元素树: 父子关系:

i. 元素.parentElement 访问当前元素的父元素

ii. 元素.children 访问当前元素的所有直接子元素

iii. 元素.firstElementChild 获得当前元素的所有直接子元素中第一个直接子元素

iv. 元素.lastElementChild 获得当前元素的所有直接子元素中最后一个直接子元素

优点: 不包含看不见的空字符，排除了对查找的干扰！

（DOM day01 查找元素）下列关于函数返回值类型错误的有:

document.getElementById("id名") 返回一个元素对象，如果找不到，返回null
任意父元素.querySelector("选择器") 返回一个类数组对象，如果找不到，返回null
任意父元素.querySelectorAll("选择器") 返回一个类数组对象，如果找不到，返回空类数组对象
任意父元素.getElementsByTagName("标签名") 返回一个类数组对象，如果找不到，返回null

答: B D

解析:按HTML特征查找: 4种

a. 按id查找一个元素:

var 一个元素对象=document.getElementById("id名")

如果返回一个元素的函数，找不到元素，返回null

b. 按标签名查找多个元素:

var 类数组对象=任意父元素.getElementsByTagName("标签名")

c. 按class名查找多个元素:

var 类数组对象=任意父元素.getElementsByClassName("class名")

d. 按name名查找多个表单元素:

var 类数组对象=document.getElementsByName("name名")

如果返回类数组对象的函数，找不到元素，返回空类数组对象

按选择器查找: 2个

a. 只查找一个符合条件的元素

var 一个元素对象=任意父元素.querySelector("选择器")

b. 查找多个符合条件的元素

var 类数组对象=任意父元素.querySelectorAll("选择器")

（DOM day02 修改元素）获取<元素 data-lg=”img/1lg.png”>中自定义属性的值，错误的有：

元素.getAttribute(“data-lg”)
元素.dataset.data-lg
元素.data-lg
元素.dataset.lg

答: B C

解析: 获取或修改自定义扩展属性的值:

元素.getAttribute("data-自定义属性名")

或元素.dataset.自定义属性名

（DOM day02 修改元素）以下关于核心DOM四个函数说法错误的是：

元素.getAttribute("属性名") //获得当前元素上指定属性的属性值
元素.setAttribute("属性名", "新属性值") //修改元素上的指定属性值为新值
元素.removeAttribute("属性名") //移除元素上指定名称的属性
元素.addAttribute("属性名") //为元素添加新属性

答: D

解析: 早期的核心DOM函数获取或修改HTML标准属性: 4个函数

1). 元素.getAttribute("属性名") //获得当前元素上指定属性的属性值

2). 元素.setAttribute("属性名", "新属性值") //修改元素上的指定属性值为新值

3). 元素.removeAttribute("属性名") //移除元素上指定名称的属性

4). 元素.hasAttribute("属性名") //判断当前元素上是否包含指定名称的属性

（DOM day02 修改元素）以下属性中不可以用“对象.属性名”方式直接访问的属性是:

HTML元素上的字符串类型的标准属性
HTML元素上的bool类型的标准属性
HTML元素上的自定义扩展属性
内存中对象里的属性

答: C

解析: 其实HTML DOM标准已经将HTML标准属性，提前放在了内存中的元素对象身上！只不过属性值暂时为""

其实所有字符串类型的标准属性，都可以用"元素.属性名"方式直接访问！

因为自定义扩展属性不是HTML标准属性，所以浏览器不认识！所以在扫描HTML元素时，就不会将自定义扩展属性添加到内存中的元素对象上！

（DOM day02 修改元素）下列修改元素的css属性正确的写法是:

元素.background-color=”red”
元素.style.background-color=”red”
元素.style.backgroundColor=”red”
元素.style.backGroundColor=”red”

答: C

解析:　修改元素的内联样式: 元素.style.css属性="属性值"

强调: 如果要修改的css属性名带-，应该去横线变驼峰命名！

1). 驼峰: 首字母小写，之后每个单词首字母大写！

2). 比如: z-index -> zIndex

list-style-type -> listStyleType

background-color -> backgroundColor

（DOM day02 添加新元素）DOM中，添加新元素的步骤不包括:

创建新元素
验证元素的内容
设置元素的关键属性
将元素添加到DOM树

答: B

解析: 添加元素: 3步:

(1). 创建新的空元素var 新元素对象=document.createElement("元素名")

(2). 为新元素添加必要属性

(3). 将新元素添加到DOM树上

（DOM day02 添加新元素）将新元素添加到DOM树的方法，不包括哪种？

在指定父元素下的所有子元素末尾追加: 父元素.appendChild(新子元素)
在指定父元素下的某个子元素之前插入: 父元素.insertBefore(新元素, 现有子元素)
在指定父元素下，替换某个子元素:父元素.replaceChild(新元素, 现有子元素)
在指定父元素下的所有子元素开头插入新元素: 父元素.prependChild(新子元素)

答: D

解析: 将新元素添加到DOM树的方法

a. 在指定父元素下的所有子元素末尾追加

父元素.appendChild(新子元素)

b. 在指定父元素下的某个子元素之前插入

父元素.insertBefore(新元素, 现有子元素)

c. 在指定父元素下，替换某个子元素

父元素.replaceChild(新元素, 现有子元素)

（DOM day03 BOM）以下关于打开窗口的方法说法错误的是:

在当前窗口打开新链接，可后退: <a href="http://tmooc.cn" target="_self">
在当前窗口打开新链接，禁止后退: location.reload("新url")
在新窗口打开新链接，同一个链接只能打开一个窗口

在当前窗口打开新链接，禁止后退: location.replace("新url")

答: B

解析: (1). 在当前窗口打开新链接，可后退

a. html: <a href="http://tmooc.cn" target="_self">

b. js: window.open("http://tmooc.cn", "_self")

(2). 在当前窗口打开新链接，禁止后退

a. js: location.replace("新url")

b. 禁止后退的原理: 请地址栏(location)，用新url地址，替换history中当前位置的旧地址

(3). 在新窗口打开新链接，可同时打开多个

a. html: <a href="http://tmooc.cn" target="_blank">

b. js: window.open("http://tmooc.cn", "_blank")

(4). 在新窗口打开新链接，同一个链接只能打开一个窗口

a. html: <a href="http://tmooc.cn" target="自定义窗口名">

b. js: window.open("http://tmooc.cn", "自定义窗口名")

（DOM day04 事件）下列绑定事件处理函数错误的是:

在HTML元素开始标签中绑定 <元素 on事件名="js语句">
在js中用赋值方式绑定: 元素对象.on事件名=function(){
添加事件监听对象的方式:元素对象.addEventListener("事件名", 事件处理函数)
添加事件监听对象的方式:元素对象.addEventListener("on事件名", 事件处理函数)

答: D

解析:　如何绑定事件处理函数: 3种:

(1). 在HTML元素开始标签中绑定

Html中: <元素 on事件名="js语句">

Js中: function 事件处理函数(){

...

}

问题: 不便于维护，不符合内容与行为分离的原则

(2). 在js中用赋值方式绑定:

元素对象.on事件名=function(){

... this->当前正在触发事件的元素对象 ...

}

问题: 一个元素的一个事件属性只能绑定一个处理函数！

(3). 添加事件监听对象的方式:

a. 元素对象.addEventListener("事件名", 事件处理函数)

添加事件监听对象

简答题:

（DOM day03 BOM）定义HTML和JS代码实现倒计时5s后关闭页面。要求，点击一个a元素可以停止倒计时，不再关闭页面（15分）

答:　 <body>

<h1 id="h1">5s后自动关闭</h1>

function fun(){

//查找id为h1的元素，并获得它的内容，将内容-1后，再放回h1中

var h1=document.getElementById("h1");

var n=parseInt(h1.innerHTML);//自动去掉数字后的非数字字符

n--;

if(n>0){

h1.innerHTML=`${n}s后自动关闭`

}else{

/*window.*/close();

}

var timer=setInterval(fun,1000);

var a1=document.getElementById("a1");

a1.οnclick=function(){

clearInterval(timer);

}

</script>

</body>

（JSCORE day08 class）编写代码说明两种class之间如何继承: （20分）

答: //定义父类型

class Enemy{

constructor(x,y){

this.x=x;

this.y=y;

}

fly(){

console.log(`一个敌人飞到:${this.x},${this.y} 位置`)

}

//定义子类型:

class Plane extends Enemy{

constructor(x,y,score){

super(x,y);

this.score=score;

}

getScore(){

console.log(`击落一架敌机,得${this.score}分`)

}

var p1=new Plane(5,10,5);

p1.fly();

p1.getScore();

（JSCORE day08 promise）使用Promise改造以下两个异步函数，实现第一个函数执行后，第二个函数才能开始执行: （20分）

function liang(){

console.log(`liang起跑...`)

setTimeout(function(){//异步

console.log(`liang到达终点！`)

},6000);

}

function ran(){

console.log(`ran起跑...`)

setTimeout(function(){//异步

console.log(`ran到达终点！`)

},4000);

}

答: function liang(){

return new Promise(//1. 格子间

//2.1 Promsie赠door

// ↓

function(door){//异步任务函数

console.log(`liang起跑...`)

setTimeout(function(){//异步

console.log(`liang到达终点！`)

//在当前任务结束后，开门通知下一个任务可以继续了！

door();//2.2 开门！

},6000);

}

)//格子间

}

function ran(){

return new Promise(//1. 格子间

//2.1 Promsie赠door

// ↓

function(door){//异步任务函数

console.log(`ran起跑...`)

setTimeout(function(){//异步

console.log(`ran到达终点！`)

//在当前任务结束后，开门通知下一个任务可以继续了！

door();//2.2 开门！

},4000);

}

)//格子间

}

//调用liang获得第一个格子间

liang()

//每个格子间对象都有.then()函数，用于连接下一个格子间

.then(ran)

JSCORE