quiz DOM基础测试31

本期填空题，测试下元素选择的基本知识，题目如下：

首位答题者额外获得2积分。

如果某题不会，留空即可。

本周六因为参加中国前端开发者大会，因此直播答疑改为周日上午10:00，请相互告知。

May 08 '19 14:05 zhangxinxu

"styleSheets" 2."head" "textContent" 3.nth-of-type 4.nth-child(3) 5.3 6.nth-last-of-type(2) 7.| 8.nth-child(2)

May 08 '19 14:05 lijianqiang1997

@lijianqiang1997 一楼貌似直接大结局了😂

最后这条貌似有点出入，楼上的是把 [class] 外面的括号脱掉了，脱掉后一切正常

不过呢，如果不想脱掉括号，其实也是可行的

PS：给个 HTML 模板，省着手打了~

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>DOM小测31</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        :root {}
    </style>
</head>

<body>
    <script src="./js/sprite.js"></script>
    <div id="pageStart" class="page page-start">
        <div class="page-body">
            <div class="content">内容</div>
        </div>
        <div>其他内容</div>
    </div>
    <div class="hr"></div>
</body>

</html>

May 08 '19 15:05 ghost

        //1 answer "styleSheets"
        console.log(document["styleSheets"][1].type);
        //2 answer "head" "textContent"
        console.log(document["head"]["textContent"].replace(/\s/g,""));
        //3 answer nth-of-type(1)
        console.log(document.querySelector("div:nth-of-type(1)").id);
        //4 answer nth-child(3)
        console.log(document.querySelector("div:nth-child(3)").className);
        //5  answer 3
        console.log(pageStart.querySelectorAll("div div").length);
        //6 answer :nth-last-of-type(2)
        console.log(pageStart.querySelectorAll(":nth-last-of-type(2) div div").length);
        //7 answer *
        console.log(pageStart.querySelectorAll("div[class*='page']").length);
        //8 觉得题目有问题 小括号里还加中括号

May 08 '19 15:05 guqianfeng

// 1. 
document.styleSheets[1].type
// 2. 
document["head"]["innerText"]
// 3.
document.querySelector('div:nth-of-type(1)').id
// 4.
document.querySelector('div:empty')
// 5.
document.querySelectorAll('div div').length = 3
// 6. 
pageStart.querySelectorAll(':scope div div').length
// 7. 
document.querySelectorAll('div[class~=page]')
document.querySelectorAll('div[class|=page]')
// 8.
document.querySelectorAll('div:not([class])').length

test link

测试link

May 08 '19 15:05 ZWkang

"styleSheets"
"head" "innerText"
:nth-of-type
:nth-child(3)
3
|
not

// 1. 
document.["styleSheets"][1].type
// 2. 
document["head"]["innerText"]
// 3.
document.querySelector('div:nth-of-type(1)').id
// 4.
document.querySelector('div:nth-child(3)')
// 5.
pageStart.querySelectorAll('div div').length 
/* = 3 */
// 6. 
 // pageStart.querySelectorAll(':div div').length
/* =1 */
// 7. 
document.querySelectorAll('div[class |=page]')
/* =1 */
// 8.
document.querySelectorAll('div:not([class])').length
/* =1 */

May 08 '19 15:05 z-xl-t

写了个在线测试工具

//1
document["styleSheets"][1].type==="text/css"
//2
document["head"]["innerText"].replace(/\s/g,'')==="DOM小测31:root{}"
//3.
document.querySelector("div:nth-child(1)").id==="pageStart"
//4
document.querySelector("div:empty").className==="hr"
//5
pageStart.querySelectorAll("div div").length===3
//6
pageStart.querySelectorAll(":scope div div").length===1
//7
document.querySelectorAll("div[class~='page']").length===1
//8
document.querySelectorAll("div:not([class])").length===1

May 08 '19 15:05 Seasonley

'styleSheets'
'head' 'innerText'
nth-child
empty
3
scope
~
not

May 08 '19 15:05 XboxYan

document.styleSheets[1].type
document.head.innerText.replace(/\s/g,'')
document.querySelector('div:nth-child(1)').id
document.querySelector('div:empty').className
3
pageStart.querySelectorAll(':scope div div')
document.querySelectorAll("div[class$='page']")
document.querySelectorAll("div:not([class])")

May 08 '19 15:05 livetune

// 1
document['styleSheets'][1].type === 'text/css'
// 2
document['head']['innerText'].replace(/\s/g, '') === 'DOM 小测 31 :root{}'
// 3
document.querySelector('div:nth-of-type(1)').id === 'pageStart'
// 4
document.querySelector('div:empty').className === 'hr'
// 5
pageStart.querySelectorAll('div div').length === 3
// 6
// ?
// 7
document.querySelectorAll("div[class~='page']").length === 1
// 8
document.querySelectorAll("div:not([class])").length === 1

上一次JS小测老师留言数组无变化，我自己测试是没有问题的，希望能提供测试数据 JS30小测测试链接

//  zxx: 已修改评分，下次记得把console输出也写上，以免发生误会

May 08 '19 16:05 Despair-lj

'styleSheets'
'head', 'innerText'
nth-of-type
empty
3
scope
|
not

May 08 '19 16:05 NeilChen4698

console.log(document["styleSheets"][1].type)
console.log(document["head"]["textContent"].replace(/\s/g,""))
console.log(document.querySelector("div:nth-of-type(1)").id)
console.log(document.querySelector("div:nth-child(3)").className)
console.log(pageStart.querySelectorAll("div div").length)
console.log(pageStart.querySelectorAll(":nth-last-of-type(2) div div").length)
// 最后一个参考二楼
console.log(document.querySelectorAll("div:not([class])").length)

https://jsbin.com/wucoqax/edit?html,js,console

May 09 '19 01:05 ylfeng250

1、 document.styleSheets[1].type 
2、 document.head.innerText.replace(/\s/g,'');
3、 document.querySelector("div:nth-of-type(1)").id
4、 document.querySelector("div:empty").className
5、 3
6、 pageStart.querySelectorAll(":nth-last-of-type(2) div div").length
7、 pageStart.querySelectorAll("div[class^='page']").length
8、 pageStart.querySelectorAll("div:not([class])").length

May 09 '19 02:05 xiyao4869

querySelector 前面的id可以直接这么用吗

May 09 '19 02:05 SWORD1937

querySelector 前面的id可以直接这么用吗

<div id="elem"></div>

May 09 '19 02:05 ghost

styleSheets
head,innerText
nth-of-type
first-of-type+div.hr
3
:not(:last-of-type)
~ 或者 |
not

May 09 '19 03:05 Fatty-Shu

styleSheets
head innerText
nth-of-type
empty
3
母鸡
~
not

document.styleSheets：只读属性，返回一个由 StyleSheet 对象组成的 StyleSheetList，每个 StyleSheet 对象都是一个文档中链接或嵌入的样式表

CSS 属性选择器通过已经存在的属性名或属性值匹配元素

又学到了，开心（^0^）

May 09 '19 03:05 smileyby

querySelector 前面的id可以直接这么用吗
<div id="elem"></div>
thank you

May 09 '19 03:05 SWORD1937

        console.log("输出1：",document['styleSheets'][1].type);
	//输出1： text/css
	console.log("输出2：",document['head']['textContent'].replace(/\s/g,''));
	//输出2： DOM小测31:root{}
	console.log("输出3：",document.querySelector('div:nth-child(1)').id);
	//输出3： pageStart
	console.log("输出4：",document.querySelector('div:nth-child(1)').nextElementSibling.className);
	//输出4： hr
	console.log("输出5：",pageStart.querySelectorAll('div div').length);
	//输出5： 3
	console.log("输出6：",pageStart.querySelectorAll(':nth-last-of-type(2) div div').length);
	//输出6： 1
	console.log("输出7：",document.querySelectorAll('div[class|=page]').length);
	//输出7： 1
	console.log("输出6：",document.querySelectorAll('div:nth-child(2)[class]').length);	
	//输出6： 1

May 09 '19 05:05 WGHwebitem

'styleSheets'
'head', 'textContent'
不会 :cry:
不会 :cry:
3 （原来 id 还可以这么用）
不会 :cry:
~
not

May 09 '19 06:05 wingmeng

[styleSheets]
[head][textContent]
nth-child
不会
3
不会
~
not

May 09 '19 12:05 pizijun

styleSheets
head textContent
div:nth-of-type(1)
div:nth-child(3)
3
:nth-last-of-type(2) div div
div[class~='page']
div:not([class])

May 09 '19 13:05 simplefeel

styleSheets
head textContent
nth-of-type
nth-child(3)
3
nth-last-of-type(2)
|
not

May 09 '19 13:05 asyncguo

"styleSheets"
"head", "textContent"
nth-of-type
nth-child(3)
3
nth-last-of-type(2)
~ 或 |
not

真的是不用不知道，学到了又好好的理解了一下nth-of-type以及其他nth开头的东西，怪自己基础不扎实 [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。 这个意思是 attr===val或者attr=val-，真实令人头大

May 09 '19 15:05 frankyeyq

1.'styleSheets' 2. 3.nth-of-type 4.empty 5.3 6. 7.~ 8.not

May 10 '19 10:05 tzmy

1.styleSheets

2.head , textContent

3.nth-child

4.empty

5.3

6 不会

7 ~ 或者 |

8.not

May 10 '19 11:05 silverWolf818

1.styleSheets

2.head innerText

3.nth-of-type

4.empty

5.3

6.scope

7.|

8.not

May 10 '19 14:05 liyongleihf2006

document['styleSheets'][1].type === 'text/css'
document['head']['innerText'].replace(/\s/g, '') === 'DOM 小测 31 :root{}'
document.querySelector('div:nth-of-type(1)').id === 'pageStart'
document.querySelector('div:empty').className === 'hr'
pageStart.querySelectorAll('div div').length === 3
6 空
document.querySelectorAll("div[class~='page']").length === 1
document.querySelectorAll("div:not([class])").length === 1

May 10 '19 14:05 wind1996

'styleSheets'
'head' 'innerText' 'head' 'textContent'
nth-of-type
nth-child(3) empty
3
scope nth-last-of-type(2)
| ~
not

May 11 '19 03:05 shxhanxia

    // 1.
    document['styleSheets'][1].type
    // 2.
    document['head']['textContent'].replace(/\s/g,'')
    // 3.
    document.querySelector("div:nth-of-type(1)").id
    // 4.
    document.querySelector("div:nth-of-type(1)~.hr").className
    // 5.
     pageStart.querySelectorAll("div div").length=3
    // 6.
     pageStart.querySelectorAll(":nth-last-of-type(2) div div").length
    // 7.
    document.querySelectorAll('div[class|=page]').length
    // 8.
    document.querySelectorAll('div:not([class])').length

May 11 '19 15:05 sghweb

本期要点：

document.styleSheets可以返回所有的样式表元素，包括以及
document.head可以返回，类似的document.body，还有document.title。
返回DOM元素的文本内容，现代浏览器都是textContent，老的IE是innerText，不过后来Chrome，Firefox浏览器也支持innerText。安全起见会这样使用 dom.textContent || dom.innerText（非必须）。
伪类:nth-of-type可以匹配当前标签类型下当前序号元素。
伪类:empty可以匹配空元素（里面没有任何东西，包括注释，空格，甚至换行符）。
pageStart.querySelectorAll("div div")意思是，整个网页匹配"div div"选择器，同时是pageStart的子元素。
伪类:scope可以用在querySelector和querySelectorAll API中，表示匹配调用这两个API的元素。然后在CSS代码中使用:scope是没有任何意思，跟:root一样的。于是pageStart.querySelectorAll(":scope div div")意思是，匹配"#pageStart div div"选择器，同时是pageStart的子元素。
~=是单词匹配，例如"page page-start"，里面就有两个单词（page 和 page-start），|=是起始匹配，有点容易搞错"page page-start"是无法匹配|=，虽然起始是page。只能匹配"page"以及"page-xxx"。
:not()伪类是逻辑匹配伪类，本身优先级（权重）是0，本身优先级是括号里面选择器决定的。

May 12 '19 02:05 zhangxinxu

quiz quiz copied to clipboard

DOM基础测试31

quiz
quiz copied to clipboard