Question

当我尝试使用querySelectorAll来获取元素时，我遇到了问题。

以下是我想从JS获得的HTML部分：

<div id="paginacao">
    <div class="pag-base"> <a href="#">var pages = document.querySelectorAll(".pag-base a");
console.log(pages[0].textContent);
</a> </div>
    <div class="pag-base"><a href="#">{{2}}</a></div>
    <div class="pag-base"><a href="#">http://nginx.org/en/docs/http/ngx_http_gzip_module.html</a></div>
    <div class="pag-base"><a href="#">{{4}}</a></div>
    <div class="pag-base"><a href="#">{{5}}</a></div>
    <div class="pag-base"><a href="#">{{6}}</a></div>
    <div class="pag-base"><a href="#">{{7}}</a></div>
    <div class="pag-base"><a href="#">{{8}}</a></div>
    <div class="pag-base"><a href="#">{{9}}</a></div>
    <div class="pag-base"><a href="#">{{10}}</a></div>
    <div class="pag-base"><a href="#">...</a></div>
  </div>

我在JavaScript上这样做：

nginx.conf

但是这总是返回undefined。谁知道我做错了什么？

Answer 1

那是因为脚本文件在你的dom准备好之前加载了。

在script tag

下面试试div tag

Answer 2

您的代码没有错。

一切按预期工作，见下文

var pages = document.querySelectorAll(".pag-base a"); console.log(pages[0].textContent);
for(var i =0; i < pages.length; i++){
  console.log(pages[i].textContent);
}

<div id="paginacao">
    <div class="pag-base"> <a href="#">Goal
    ::= (Function|Statement)* <EOF>
Function
    ::= "def" Identifier "(" Argument? ")" ":" Statement 
Argument
    ::= Identifier ("=" Value )? ( "," Identifier ("=" Value )?)* 
Statement
    ::= tab* "if" Comparison ":" Statement 
    |tab* "while" Comparison ":" Statement
    |tab* "for" Identifier "in" Identifier ":" Statement
    |tab* "return" Expression 
    |tab* "print" Expression ("," Expression)* 
    |tab* Identifier ( "=" | "-=" | "/=" ) Expression 
    |tab* Identifier "[" Expression "]" "=" Expression 
    |tab* Function Call 
Expression
    ::= Expression ( "+" | "-" | "*" | "/" ) Expression
    | ( "++" | "--" ) Expression
    | Expression( "++" | "--" )
    | Identifier "[" Expression "]"
    | Function Call 
    | Value 
    | Identifier
    | "(" Expression ")"
    | "["Value ( "," Value)*"]"
Comparison
    ::= Expression ( ">" | "<" | "!=" | "==") Expression
    | "true"
    | "false"
Function Call
    ::= Identifier "(" Arglist? ")"
Arglist
    ::= Expression ( "," Expression )* 
Value
    ::= Number | "<STRING_LITERAL>"|'<STRING_LITERAL>'
Number
    ::= <INTEGER_LITERAL> 
Identifier
    ::= <IDENTIFIER>

<STRING_LITERAL> = A word that can contain letter(capitals or non capital) and white spaces
<INTEGER_LITERAL> = An integer number
<IDENTIFIER> = Name of a variable
</a> </div>
    <div class="pag-base"><a href="#">{{2}}</a></div>
    <div class="pag-base"><a href="#">{{3}}</a></div>
    <div class="pag-base"><a href="#">{{4}}</a></div>
    <div class="pag-base"><a href="#">{{5}}</a></div>
    <div class="pag-base"><a href="#">{{6}}</a></div>
    <div class="pag-base"><a href="#">{{7}}</a></div>
    <div class="pag-base"><a href="#">{{8}}</a></div>
    <div class="pag-base"><a href="#">{{9}}</a></div>
    <div class="pag-base"><a href="#">{{10}}</a></div>
    <div class="pag-base"><a href="#">...</a></div>
  </div>

来自JavaScript的querySelectorAll（）失败

2 个答案: