Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript 高级程序设计 【习题与参考答案】 #4

Open
taichiyi opened this issue May 9, 2019 · 0 comments

Comments

Projects
None yet
1 participant
@taichiyi
Copy link
Owner

commented May 9, 2019

JavaScript 高级程序设计 【习题与参考答案】

环境:chrome(74.0)

11 DOM 扩展

11.1 选择符API

11.1-01 selector API Level 1 有几个方法?没有找到匹配的元素分别返回什么?
- 2个
- querySelector:null;querySelectorAll:空的NodeList数组 []
11.1-02 querySelectorAll返回的NodeList是动态的吗?
不是
11.1-03 请使用querySelectorAll完成以下查找:
11.1-03.01 body元素。
document.querySelector('body')
11.1-03.02 ID值等于“myDiv”的元素。
document.querySelectorAll('[id="myDiv"]')
document.querySelectorAll('#myDiv')
11.1-03.04 类值等于selected的元素。
document.querySelectorAll('[class="selected"]')
11.1-03.05 类值包含selected的元素。
document.querySelectorAll('.selected')
document.querySelectorAll('[class*="selected"]')
11.1-03.06 类值包含“button”的img元素。
document.querySelectorAll('img.button')
11.1-03.07 div元素下标签名为span的子元素。
document.querySelectorAll('div > span')
11.1-03.08 div元素下的span元素。
document.querySelectorAll('div span')
11.1-03.09 a元素中属性名为target的元素。
document.querySelectorAll('a[target]')
11.1-03.10 p元素中属性名为id,值等于p1的元素。
document.querySelectorAll('p[id="p1"]')
document.querySelectorAll('p#p1')
11.1-03.11 p元素中存在属性名为id,值为p开头的元素。
document.querySelectorAll('p[id^="p"]')
11.1-03.12 p元素中存在属性名为id,值为p结尾的元素。
document.querySelectorAll('p[id$="p"]')
11.1-03.13 p元素中存在属性名为id,值包含p的元素。
document.querySelectorAll('p[id*="p"]')
11.1-03.14 p元素中存在属性名为id,值为包含"p";属性名为class,值包含"classname"的元素。
document.querySelectorAll('p[id*="p"][class*="classname"]')
11.1-03.15 div元素和span元素。
document.querySelectorAll('div, span')
11.1-03.16 div元素之后相邻siblings元素,名为span的元素。
document.querySelectorAll('div+span')
11.1-03.17 div元素之后的siblings元素中名为span的元素。
document.querySelectorAll('div~span')
11.1-03.18 所有元素。
document.querySelectorAll('*')

11.2 元素遍历

11.2-01 Element Traversal(元素遍历) API 为DOM元素新添加了哪几个属性?是否包括文本和注释节点?各自的意思
: 5个
: 不包括文本和注释节点
- childElementCount: 返回子元素(不包括文本和注释节点)的个数
- firstElementChild: 指向第一个子元素;firstChild的元素版。
- lastElementChild: 指向最后一个子元素;lastChild的元素版。
- previousElementSibling: 指向前一个同辈元素;previousSibling的元素版。
- nextElementSibling: 指向后一个同辈元素;nextSibling的元素版。

11.3 HTML5

11.3.1 与类相关的扩充

11.3.1-01 getElementsByClassName 参数与返回值
参数:一个包含一或多个类名的字符串
返回值: HTMLCollection
11.3.1-02 请使用getElementsByClassName完成以下查找:
11.3.1-02.01 所有类中包含“username”的元素
document.getElementsByClassName('username')
11.3.1-02.02 所有类中包含“username”和“current”的元素
document.getElementsByClassName('username current')
11.3.1-03 getElementsByClassName返回的HTMLCollection是动态的吗?
11.3.1-04 HTML5 新增了一种操作类名的方式,这个方式是什么?这种操作类名的方式有几种方法?各方法的意义
这个方式是为所有元素添加一个属性,属性名为classList,值为新集合类型DOMTokenList的实例(类数组)。
add(value): 将给定的字符串值添加到列表中。如果值已存在,就不添加了。
contains(value): 表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
remove(value): 从列表中删除给定的字符串。
toggle(value): 如果列表中已存在给定的值,删除它;如果不存在,添加它。
11.3.1-05 已知一个元素赋给了名为div的变量,该元素的class为bd。此时需要添加一个名为disabled的类,列出可能的方式。
1:
var classNames = div.className.split(/\s+/);
classNames.push('disabled')
div.classNames = classNames.join(' ')
2:
div.classList.add('disabled')

11.3.2 焦点管理

11.3.2-01 怎么得到DOM中当前获取焦点的元素?
document.activeElement
11.3.2-02 如何通过JavaScript让可获取焦点的元素获取焦点?
element.focus()
11.3.2-03 如何判断否个元素获取了焦点?
element.hasFocus()

11.3.3 HTMLDocument 的变化

11.3.3-01 介绍一下HTML5 HTMLDocument的拓展属性readyState
Document的readyState属性有两个可能的值:
- loading: 正在加载文档
- complete: 已加载完文档
一般document.readyState会借助onload事件使用
11.3.3-02 介绍一下HTML5 新增的一个获取head元素的方式
document.head
在此之前会使用:document.getElementsByTagName('head')[0]

11.3.5 自定义数据属性

11.3.5-01 HTML5中可以为元素添加非标准(自定义)属性,是添加前缀吗?什么前缀?
data-
11.3.5-02 可以通过元素的哪个属性名来访问元素自定义属性的集合?该属性值是哪个对象的实例?
属性名:dataset
属性值对象:DOMStringMap
11.3.5-03 如何获取div元素自定义属性"myname"的值?
var myName = div.dataset.myname
11.3.5-04 如何设置div元素自定义属性"myname"的值?
div.dataset.myname = "taichiyi"

11.3.6 插入标记

11.3.6-01 介绍一下元素的innerHTML属性。有几种模式?分别代表什么含义?
背景:
给文档插入大量新HTML标记的情况下,通过DOM操作非常麻烦。
读模式:innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。
写模式:innerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换原先所有子节点。
11.3.6-02 介绍一下元素的outerHTML属性的读、写模式。
读模式:outerHTML返回调用它的元素及所有子节点的HTML标签。
写模式:outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM字数完全替换调用元素。
11.3.6-03 元素的insertAdjacentHTML方法,各个参数的意义?第一个参数的所有枚举?
一参:插入位置;
"beforebegin":在当前元素之前插入一个紧邻的同辈元素;
"afterbegin":在当前元素之下插入一个新的子元素或在第一个子元素之前插入一个新的子元素;
"beforeend":在当前元素之下插入一个新的子元素或在最后一个子元素之后插入一个新子元素;
"afterend":在当前元素之后插入一个紧邻的同辈元素;
二参:要插入的HTML文本;
11.3.6-04 插入标记,一般有哪些性能问题?
最好拼接好标记后一次性插入DOM,避免高频率将标记插入DOM

11.3.7 scrollIntoView()方法

11.3.7-01 scrollIntoView方法的参数有哪些?分别代表什么意思?
可传1个参数:true或false(默认true)
ture: 窗口滚动会让调用元素的顶部与视口顶部尽可能平齐。
false: 调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口底部平齐)

11.4 专有扩展

11.4.2 children 属性

11.4.2 元素的children属性和childNodes属性有什么区别?children属性值是哪个对象的实例?
childNodes: 包含所有类型节点(文本和注释节点)
children: 只包含元素节点
是HTMLCollection对象的实例

11.4.3 contains()方法

11.4.3 如何判断某个节点是不是另一个节点的后代?
document.documentElement.contains(document.body)
返回值为boolean

11.4.4 插入文本

11.4.4-01 介绍一下innerText属性
innerText有两种模式:读模式和写模式
- 读模式: 它会按照由浅入深的顺序,把子文档树种的所有文本节点的值拼接起来。
- 写模式: 删除该元素的所有子节点,插入包含相应文本值的文本节点。

12 DOM2 和 DOM3

12.2.1 访问元素的样式

12.2.1-01 style属性是什么的实例?所有节点都支持style属性吗?各举一个支持和不支持的。
CSSStyleDeclaration的实例
不是所有都支持:元素节点支持;文本节点不支持
12.2.1-02 介绍一下CSSStyleDeclaration对象的方法和属性
注意:元素的style属性不包含从其他样式表层叠来的样式信息,如果要获取层叠来的样式信息可以通过getComputedStyle()方法
cssText: 获取style特性中的CSS代码。
length: 元素style的CSS属性的数量
getPropertyPriority(propertyName): 返回给定属性使用了!important设置,则返回"important";否则返回空字符串。
getPropertyValue(propertyName): 返回给定属性的字符串值
removeProperty(propertyName): 从样式中删除给定的属性,返回被删除的属性值
setProperty(propertyName, value, priority): 将给定的属性设置为相应的值,并加上优先权标志("important"或一个空字符串)
12.2.1-03 介绍一下getComputedStyle
getComputedStyle可以获取元素层叠来的样式信息
document.defaultView.getComputedStyle(element, 伪类元素字符串(例如:':after)): 返回一个CSSStyleDeclaration对象
document.defaultView.getComputedStyle(document.querySelector('#p3')).backgroundColor

12.2.2 操作样式表

12.2.2-01 介绍一下"样式表"
CSSStyleSheet 类型表示的是样式表,包括通过<link>元素包含的样式表和<style>元素中定义的样式表。
访问样式表的属性:.xxx
样式表的属性:
disabled: (boolean)表示样式表是否被禁用。
href: 如果样式表是通过<link>包含的,则是样式表的URL;否则,是null。
parentStyleSheet: 如果样式表是通过@import导入的,则非null;否则,是null。
12.2.2-02 访问"样式表"的方式?
document.querySelector('style').sheet
document.styleSheets

12.2.3 元素大小

12.2.3-01 涉及到元素偏移量的属性有哪些?各自的意义
offsetHeight: 元素在垂直方向上占用的空间大小。
offsetWidth: 元素在水平方向上占用的空间大小。
offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。
12.2.3-02 元素的clientHeight包含padding吗?包含border吗?包含margin吗?
- 包含padding
- 不包含border
- 不包含margin
12.2.3-03 元素从里到外是什么顺序(content, padding, margin, border)
content -> padding -> border -> margin
12.2.3-04 html元素是不是自带滚动条?
12.2.3-05 介绍一下与滚动大小相关的属性
scrollHeight: 元素内容的实际高度。在没有滚动条的情况下,等于clientHeight.
scrollWidth: 元素内容的实际宽度。在没有滚动条的情况下,等于clientWeight.
scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素滚动位置。
scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素滚动位置。
12.2.3-06 介绍getBoundingClientRect()方法,的x,y,width,height
x,y,width,height

13 事件

13.1 事件流

13.1-01 JavaScript与HTML之间的交互是通过什么实现的?
事件
13.1-02 什么是事件冒泡?什么是事件捕获?
- 事件冒泡: 事件开始时由文档中嵌套层次最深的那个节点接收,然后逐级向上传播。
- 事件捕获: 与事件冒泡相反。
13.1-03 “DOM2级事件”规定的事件流包括三个阶段,哪三个阶段?
事件捕获阶段、处于目标阶段和事件冒泡阶段

13.2 事件处理程序

13.2-01 事件处理程序有几种?
- HTML: <input type="button" onclick="alert(123)" />
- DOM0:
var btn = document.getElementById("myBtn")
btn.onclick = function() { alert(123) }
- DOM2:
var btn = document.getElementById("myBtn")
btn.addEventListener('click', function() { alert(123) }, false)
13.2-02 addEventListener 同一个元素同一个事件可以添加多个吗?触发顺序?介绍下全部参数
- 可以
- 先添加先触发
- 参数:
1参:事件名
2参:作为事件处理程序的函数
3参:boolean;false: 在冒泡阶段调用事件处理函数。true: 在捕获阶段调用事件处理函数

13.3 事件对象

13.3-01 介绍一下“事件对象”的常用属性和方法
- bubbles: 事件是否冒泡
- cancelable: 是否可以取消事件的默认行为
- currentTarget: 当前正在处理事件的那个元素
- defaultPrevented: 为true表示已经调用preventDefault()(DOM3级)
- preventDefault(): 取消事件的默认行为。如果cancelable是true才可以使用。
- stopImmediatePropagation(): 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用。(DOM3级)
- stopPropagation(): 取消事件的进一步捕获或冒泡。如果bubbles为true才可以使用

13.4 事件类型

13.4-01 UI事件有哪些?及其意义
- load: 1.当页面加载完后在window上面触发;2.当图像加载完毕在<img>元素上触发;3.当嵌入的内容加载完毕时在<object>元素上面触发
- unload: 卸载
- abort: 在用户停止下载过程中,如果嵌入的内容没有加载完,则在<object>元素上触发
- error: 1.当JavaScript错误时在window上面触发;2.当无法加载图像时在<img>元素上触发;3.当无法加载嵌入内容时在<object>元素上面触发
- select: 用户选择文本框(input或textarea元素)触发
- resize: 当窗口或框架的大小变化时在window或框架上面触发。
- scroll: 当在用户滚动带滚动条的元素中的内容时。
13.4-02 焦点事件有哪些?及其意义
- blur: 在元素失去焦点时触发。不会冒泡。
- focusout: 在元素失去焦点时触发。冒泡。
- focus: 在元素获得焦点时触发。不会冒泡。
- focusin: 在元素获得焦点时触发。冒泡。
13.4-03 当焦点从页面中的一个元素移动到另一个元素,focusin,blur,focusout,focus的触发顺序?
focusout -> focusin -> blur -> focus
13.4-04 鼠标事件有哪些?及其意义
- click: 单击事件
- dblclick: 双击事件
- mousedown: 按下任意鼠标按钮
- mouseenter: 光标首次从元素外移动到元素范围之内时触发。不冒泡,后代元素不触发。
- mouseleave: 在位于元素上方的鼠标光标移动到元素范围(包括子元素)之外时触发。不冒泡
- mousemove: 当鼠标指针在元素内部移动时重复地触发。
- mouseout: 当鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发(包括子元素)。
- mouseover: 在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素(包括子元素)边界之内时触发。
- mouseup: 用户释放鼠标按钮时触发。
- mouseleave: 鼠标滚轮,触摸板。
13.4-05 鼠标事件哪些会冒泡?
- 除了mouseenter和mouseleave,所有鼠标事件都冒泡。
13.4-06 mousedown,mouseup,click,dblclick的关系
- 只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件。只有触发两次 click 事件,才会触发 dblclick 事件。
13.4-07 键盘事件有哪些?及其意义
- keydown: 当用户按下键盘上任意键时触发,按住不放则重复触发。
- keypress: 当用户按下键盘上字符键时触发,按住不放则重复触发。
- keyup: 当用户释放键盘上字符键时触发。
13.4-07 文本事件有哪些?及其意义
- textInput: 在文本显示给用户前拦截文本。
13.4-08 什么是复合事件?
- 复合事件是DOM3级事件中新添加的一类事件,用于处理IME的输入序列。IME通常需要同时按住多个建,但最终只输入一个字符。
13.4-09 介绍一下DOM3的3个变动事件
- DOMSubtreeModified:在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
- DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中时触发。
- DOMNodeRemoved:在节点从其父节点中被移除时触发。
13.4-10 介绍一下contextmenu事件
- 监听鼠标右击事件,一般用于自定义菜单

@taichiyi taichiyi changed the title # JavaScript 高级程序设计 【习题】 JavaScript 高级程序设计 【习题】 May 9, 2019

@taichiyi taichiyi changed the title JavaScript 高级程序设计 【习题】 JavaScript 高级程序设计 【习题与参考答案】 May 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.