WEB APIS 练习题
单选题
关于获取元素,以下描述正确的是:
A，document.getElementById()获取到的是元素集合
B，document.getElementsByTagName()获取到的是单个元素
C， document.querySelector()获取到的是元素集合
D， document.getElementsByClassName()有浏览器兼容性问题
答案: D
解析: A选项，返回的是单个元素对象或null；B选项返回的是元素集合；C选项返回的单个元素对象；D选项，是h5新增的方法，所以有浏览器兼容性问题
难度: ☆☆
考点：获取元素
单选题
关于获取元素,以下获取到单个元素的方法是:
A，document.getElementById()
B，document.getElementsByTagName()
C， document.querySelectorAll()
D， document.getElementsByClassName()
答案: A
解析: A选项，返回的是单个元素对象或null；
难度: ☆
考点：获取元素
多选题
关于获取元素,以下获取到元素集合的方法是:
A，document.getElementById()
B，document.getElementsByClassName()
C， document.querySelector()
D， document.querySelectorAll()
答案: BD
解析: D选项，返回的是元素集合；选项A，返回的是单个元素对象或null
难度: ☆
考点：注册事件
单选题
点击一个按钮，弹出对话框, 应该填写的正确代码是():
<body>
<button id="btn">唐伯虎</button>
<script>
var btn = document.getElementById('btn');
____________
</script>
</body>
A, btn.onclick = function() {
alert('点秋香');
}
B, btn.onclick = alert('点秋香');
C, btn.click = function() {
alert('点秋香');
}
D, btn.click()
答案: A
解析: 考查注册单击事件，选项A是正确的格式
难度: ☆☆
考点: 注册事件
多选题
关于事件，下列描述正确的是：
A，当页面一打开，所有的事件就会被触发
B，注册事件的格式为： 事件源.事件 = 事件处理程序
C，一个事件只能触发执行一次
D，事件函数内this指的是当前触发事件的元素
答案: BD
解析: A选项，页面加载完只会触发页面加载事件；B选项，正确的注册事件方式；C选项，事件是触发一次执行一次；D选项，事件处理函数中this指向事件源对象；
难度: ☆☆
考点：操作元素内容
多选题
关于操作元素的内容，说法正确的是：
A，innerHTML可以识别渲染html标签
B，innerText不可以识别html标签
C，element.innerHTML = ''; 和 element.innerText = ''; 作用一样
D，var content = element.innerHTML; 和 var content = element.innerText; 的作用一样
答案：ABC
解析：innerText和innerHTML的区别。修改内容时,innerHTML可以识别渲染标签，innerText不可以，所有AB选项正确。C选项，都是清空标签的内容，正确。D选项，获取内容时，innerHTML会原封不动的获取内容包括标签、空白、换行，而innerText会过滤标签、空白、换行。
难度: ☆☆☆
考点：操作元素属性
单选题
关于操作元素的属性，错误的是：
A，element.id = 'box01';
B，element.src = 'image/new.jpg';
C，element.title = '黑马程序员';
D，element.class = 'contentLeft';
答案：D
解析：操作元素常用属性。操作元素属性的格式为：元素对象.属性名 = 值; 但是class属性特殊，用className。
难度: ☆☆
单选题
关于操作元素的class属性，正确的是：
A，element.setAttribute('className', 'active');
B，element.class = 'active';
C，element.className = 'active';
D，element.class-name = 'active';
答案：c
解析：操作元素属性的格式为：元素对象.属性名 = 值; 但是class属性特殊，用className。使用setAttribute操作class时用class
难度: ☆☆
考点：操作自定义属性
多选题
有一标签<div data-uname="ls"></div> ，可以获取标签自定义属性的选项是：
A，divObj.dataset["uame"]
B，divObj.dataset.uname
C，divObj.getAttribute('data-uname')
D，divObj.data-uname
答案：ABC
解析：1.兼容性获取 element.getAttribute(‘data-index’);2.H5新增 element.dataset.index 或者 element.dataset[‘index’]
难度: ☆☆☆
考点：节点的层级关系
单选题
关于节点操作，下面选项能获取子元素节点的是：
A，element.child
B，element.childNode
C，element.childNodes
D，element.children
答案：D
解析：获取子节点使用childNodes，获取子元素节点使用children
难度: ☆
考点：节点的层级关系
多选题
关于节点的层级关系操作，下面描述正确的是：
A，使用子节点.parentNode可以找到父节点
B，使用父节点.children 找到所有的子元素
C，使用父节点.children 找到所有的子节点
D，使用节点.parentNode.parentNode可以找到父节点的父节点
答案：ABD
解析：节点之间的层级关系，获取父节点使用parentNode，获取子节点使用childNodes，获取子元素children
多选题
下列哪些选项可以实现创建元素：
A，element.push('<p>传智播客</p>')
B，element.pop('<p>传智播客</p>');
C，element.innerHTML = '<p>传智播客</p>';
D， document.createElement("p")';
答案：CD
解析：创建元素的方法
难度: ☆☆
考点：创建添加元素
多选题
关于添加元素，下列选项描述正确的是：
A，innerHTML会覆盖原来的元素
B，appendChild 是在父元素内部追加
C，insertBefore 可以在父元素内部指定的位置添加
D， createElement创建的元素立即会添加在页面
答案：ABC
解析：创建添加元素的方法，D选项，createElement要配合其他添加方法使用。
难度: ☆☆
考点：事件监听
多选题
关于事件监听，描述正确的是：
A，可以给同一元素同一事件注册多个监听器
B，addEventListener() 有浏览器兼容问题
C，addEventListener() 方法有3个参数
D，低版本的IE可以使用attacheEvent代替addEventListener
答案：ABCD
解析：IE9以后才支持addEventListener，低版本IE使用attacheEvent。
难度: ☆☆
考点：事件对象
单选题
关于事件对象，描述正确的是：
A，事件对象的属性中保存了跟事件相关的一系列信息
B，事件触发时就会产生事件对象
C，事件对象的获取有兼容性问题
D，通过事件对象可以阻止事件冒泡和默认行为
答案：ABCD
解析：事件对象有很多方法和属性，保存了事件相关的信息，获取时有兼容性问题，使用事件对象可以阻止事件冒泡和默认行为
难度: ☆☆
考点：事件对象
单选题
下列选项，哪个可以正确获取到兼容了各个浏览器的事件对象：
A，document.onclick = function(evt){ var e=window.event||event; };
B，document.onclick = function(evt){ var e=window.evt||event; };
C，document.onclick = function(evt){ var e=window.event||evt; };
D，document.onclick = function(evt){ var e=window.evt||evt; };
答案：C
解析：事件对象的兼容性考虑。低版本的IE，通过 window.event获取事件对象。
单选题
以下关于offset系列属性和style属性的说法，正确的是()
A.通过style属性获取到的样式结果是字符串类型，而通过offset系列获取到的属性值是数字类型。~ B.offset系列属性和style属性一样，都可以获取到元素的行内样式。~ C.style系列属性只能获取元素的行内样式，offset系列属性能获取到元素的所有样式。~ D.以上说法都不正确。
答案: A
解析: 本题考查的是offset系列属性的使用。答案B和C错误，offset系列属性用来获取元素显示的效果，但是并不是所有的样式都能够获取到，只能获取到宽度，高度，左右距离等。
难度: ☆☆
考点：offset系列属性
单选题
下列关于offsetWidth和offsetHeight的说法，正确的是()
A.这两个属性用来表示内容的大小，不包括边框和内边距。~ B.获取到结果是数字类型，方便计算。计算完成以后的值，可以再使用offsetWidth和offsetHeight重新设置给元素。~ C.这两个属性值的结果是字符串类型的数据，默认单位是px.~ D.这两个属性是只读属性。
答案: D
解析: 本题考查的是offset系列属性的使用。答案A错误，offsetWidth和offsetHeight表示的是盒子的大小，包括边框和内边距；答案B错误，这两个属性是只读属性，不能被修改；答案C错误，这两个属性获取到的结果是数字类型，不是字符串类型。
难度: ☆☆
考点：offset系列属性
多选题
下列关于offsetParent的说法，正确的是()
A.offsetParent获取到的是元素的父元素。~ B.offsetParent属性和parentNode属性的含义一样。~ C.offsetParent属性用来获取离这个元素最近的绝对定位父元素。~ D.以上说法都错误。
答案: D
解析: 本题考查的是offset系列属性的使用。答案C错误，offsetParent获取的是离这个元素最近的有定位的父元素，不管这个父元素是绝对定位还是相对定位。所以A和B也错误
难度: ☆☆☆
考点：scroll系列属性的使用
多选题
以下关于scroll系列属性的说法正确的是()
A.scrollWidth和scrollHeight获取的是盒子的大小，包括边框和内边距。~ B.scrollTop指的是盒子内容被滚动条卷去的头部的高度。~ C.scroll系列属性和offset系列属性的作用一样。~
答案：B
解析：本题考查的是scroll属性的使用。答案A错误，scrollWidth和scrollHeight获取到的是内容的大小；答案C错误，scroll系列和offset系列属性的作用不一样；答案D错误，没有scrollParent这个属性。
难度: ☆☆
考点：scroll系列属性的使用
多选题
以下关于scroll系列属性的说法错误的是()
A.一般情况下，我们不会获取某一个元素的滚动距离，通常会获取整个页面的滚动距离。
B.监听一个元素的滚动，需要给这个元素添加onscroll事件。
C.获取页面的滚动距离，document.documentElement.scrollTop 和 document.body.scrollTop;。
D.scrollRight获取的是盒子内容被滚动条卷去的右边的宽度。
答案：D
解析：本题考查的是scroll属性的使用。答案D错误，没有scrollRight这个属性。
难度: ☆☆
考点：touchEvent
单选题
以下哪些不属于touch事件对象的属性（）
A.changedTouches属性 B.targetTouches属性 C.touches属 D.touch属性
答案: D
解析: 本题考查的是touchEvent中常见的属性。答案D错误，因为没有这个属性。
难度: ☆☆
考点：touch事件类型
单选题
以下关于touch事件说法错误的是（）
A.touchstart是指手指按压下去后触发 B.touchmove是手指按压并且滑动后触发 C.touchend是手指松开后触发 D.touchover是指手指松开后触发
答案: D
解析: 本题考查的是touch相关的事件类型。答案D错误，因为没有这个事件。
难度: ☆☆
考点：scroll系列属性的使用
多选题
以下关于touch事件说法正确的是（）
A.click是鼠标事件，但是在移动端也能使用。~ B.mousedown和mouseup是鼠标事件，在移动端能够使用。~ C.鼠标事件click在移动端比touchstart执行效率高~ D.鼠标事件在移动端不能够使用~ E.在移动端，touch事件比鼠标事件执行效率高
答案: ABE
解析: 本题考查的是touch事件和鼠标事件在移动端的区别。答案C错误，在移动端touch相关的事件类型比鼠标事件执行效率高；答案D错误，鼠标事件在移动端也可以使用
难度: ☆☆☆
考点：touchEvent
多选题
以下关于touch事件对象说法正确的是（）
A.touches属性可以获取屏幕上的所有手指的列表 B.changedTouches属性在touchsend事件处理程序中得到改变的手指列表 C.targetTouches属性和touches在手指按下和移动中都可以获取手指列表 D.手指列表中的某一个手指的clientX和pageX在移动端可以互相使用 E.在click事件中也可以获取touches属性
答案：ABCD
解析：本题考查的是touchEvent创建的属性及作用。答案E错误，鼠标事件中不存在touches属性
难度: ☆☆☆
