• 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系列属性

    单选题

    以下关于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系列属性的作用一样。~ D.scrollParent属性用来获取滚动时参考的父元素。

    答案: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属性

    难度: ☆☆☆

     

     

     

  • 相关阅读:
    【C++】C++代码动态检查
    【加解密】使用CFSSL生成证书并使用gRPC验证证书
    分库分表下跨库join解决方案
    解决1235
    为什么v-for中的key值不推荐使用index
    弹性布局公共样式总结
    关于python的模块
    [转]Ubuntu18.04安装uwsgi错误:error: lto-wrapper failed collect2: error: ld returned 1 exit status
    python 坐标遍历 生成笛卡尔积矩阵
    Mongo BsonUndefined 转换问题(自定义Mongo类型转换器)
  • 原文地址:https://www.cnblogs.com/ndh074512/p/14711389.html
Copyright © 2020-2023  润新知