DOM基础测试31 - Githubissues

zhangxinxu commented 5 years ago

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

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

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

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

lijianqiang1997 commented 5 years ago

"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)

ghost commented 5 years ago

@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>

guqianfeng commented 5 years ago

        //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 觉得题目有问题 小括号里还加中括号

ZWkang commented 5 years ago

// 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

z-xl-t commented 5 years ago

"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 */

Seasonley commented 5 years ago

写了个在线测试工具

//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

XboxYan commented 5 years ago

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

livetune commented 5 years ago

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])")

Despair-lj commented 5 years ago

// 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输出也写上，以免发生误会

NeilChen4698 commented 5 years ago

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

ylfeng250 commented 5 years ago

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

xiyao4869 commented 5 years ago

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

SWORD1937 commented 5 years ago

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

ghost commented 5 years ago

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

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

Fatty-Shu commented 5 years ago

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

smileyby commented 5 years ago

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

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

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

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

SWORD1937 commented 5 years ago

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

WGHwebitem commented 5 years ago

        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

wingmeng commented 5 years ago

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

pizijun commented 5 years ago

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

simplefeel commented 5 years ago

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])

asyncguo commented 5 years ago

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

frankyeyq commented 5 years ago

"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-，真实令人头大

tzmy commented 5 years ago

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

silverWolf818 commented 5 years ago

1.styleSheets

2.head , textContent

3.nth-child

4.empty

5.3

6 不会

7 ~ 或者 |

8.not

liyongleihf2006 commented 5 years ago

1.styleSheets

2.head innerText

3.nth-of-type

4.empty

5.3

6.scope

7.|

8.not

wind1996 commented 5 years ago

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

shxhanxia commented 5 years ago

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

sghweb commented 5 years ago

    // 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

zhangxinxu commented 5 years ago

本期要点：

document.styleSheets可以返回所有的样式表元素，包括以及

zhangxinxu / quiz

DOM基础测试31 #24