Question

我试图通过getElementById使用以下代码访问body的子级：

function myFunction() {
  var body = document.getElementById("textBody");
  var x = body.getElementsByClassName("myDIV");
  for(var i=0; i < x.length; i++) {
    var y = x[i].getElementsByTagName("h1");
    var z = x[i].getElementsByTagName("mynode");
    for (var i = 0; i < y.length; i++) {
      y[i].setAttribute("class", "democlass");
      z[i].setAttribute("class", "democlass");
    }
  }
}

.democlass {
      color: red;
    }

  <body id="textBody">
      <div class="myDIV">
        <h1 name="demoNode">Hello World</h1>
        <mynode> hi there </mynode>
      </div>
    
      <div class="myDIV">
        <h1 name="demoNode">Hello World</h1>
        <mynode> hi there </mynode>  
      </div>
      <h1 name="demoNode">Hello World</h1>
    
      <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>
    
      <button onclick="myFunction()">Try it</button>

</body>

代码应将标题文本着色为红色。但它似乎不适合我。你能让我知道为什么吗？据我所知，它无法访问我正在等待的确切节点。

Answer 1

在您的样式中，您将democlass称为类，而将其设置为id属性。您可以参考我的代码进行更改

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
 <body class="textBody">
      <div class="myDIV">
        <h1 name="demoNode">Hello World</h1>
        <mynode> hi there </mynode>
      </div>

      <div class="myDIV">
        <h1 name="demoNode">Hello World</h1>
        <mynode> hi there </mynode>  
      </div>
      <h1 name="demoNode">Hello World</h1>

      <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>

      <button onclick="myFunction()">Try it</button>

</body>
<script>    
function myFunction() {
      //var body = document.getElementsByClassName("textBody"); (This code is not required)
      var x = document.getElementsByClassName("myDIV");
      for(var i=0; i < x.length; i++) {  
        var y = x[i].getElementsByTagName("h1");
        var z = x[i].getElementsByTagName("mynode");
//initialise the second loop with a different variable

        for (var j = 0; j < y.length; j++) {
            y[j].setAttribute("id", "democlass");
            z[j].setAttribute("id", "democlass");
        }
      }
    }
</script>
<style type="text/css"> 
//Id reference for styling  
 #democlass {
      color: red;
    }
    </style>
</html>

Answer 2

你在JavaScript方面很差我们要了解为什么我们使用getelementbyid以及为什么getelementbytagname。你最大的错误就是你在id基本元素上循环是错误的。您只能通过id获取一个元素，您应该使用getelementbytagname或getelementbyclassname进行循环。请参阅指南的打击代码。

＆＃13;

function myFunction() {
      var body = document.body.childNodes;
      // var div = document.getElementById("myDIV").childNodes;
      // console.log(div.length);
      for (i = 0; i < body.length; i++) {
        //console.log(div.length);
      if(""+body[i].nodeName+""== "H1")
      {
        body[i].className = 'democlass';
      } 
    }
}

＆＃13;

.democlass {
      color: red;
      background: green;
    }

＆＃13;

<body id="textBody">
      <div id="myDIV">
        <h1 name="demoNode">Hello World</h1>
        <mynode> hi there </mynode>
      </div>
    
      <div id="myDIV">
        <h1 name="demoNode">Hello World</h1>
        <mynode> hi there </mynode>  
      </div>
      <h1 name="demoNode">Hello World</h1>
    
      <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>
    
      <button onclick="myFunction()">Try it</button>

</body>

＆＃13;

如何通过getElementsByClassName获取子节点

2 个答案: