Question

我想要使用标记h1（前两个h1）访问元素a的直接子元素。我＆＃39;我这样做了：

var h =a. getElementsByTagName('h1');

之后，我必须为那些没有类属性的h1添加一个类。我怎样才能做到这一点？我想到了类似的东西：

 if (h.classList.contains(NULL) == true)
     h.classList.add('class');

这是html正文：

  <body>
          <a> 
           <h1></h1>
           <h1></h1>
           <div>
                <h1></h1>
           </div>
        </a>

</body>

Answer 1

你可以这样做：

＆＃13;

    var h = document.getElementsByTagName('h1');

    // No fancy forEach
    for (var i = 0; i < h.length; i++) {
        if (h[i].classList.length === 0) {
            h[i].classList.add("class");
        }
    }

＆＃13;

.class {
  color:red;
  }

.some_class {
  color: blue;
  }

＆＃13;

<body>
<a>
    <h1>Heading 1</h1>
    <h1 class = "some_class">Heading 2</h1>
    <div>
        <h1>Heading 3</h1>
    </div>
</a>
</body>

＆＃13;

Answer 2

getElementsByTagName返回一个类似于数组的结构，其中包含与名称匹配的所有元素，在本例中为<h1>。您需要遍历它才能访问每个<h1>。

Answer 3

使用此选择器，您将选择任何锚的第一个和第二个子项，但将忽略第3个，第4个等h1子项。

a > h1:nth-child(-n+2)

代码段1演示了如何将此选择器与querySelectorAll()一起使用。如果你需要逻辑：

如果第一个或第二个h1 确实有一个班级，那么就不要指定一个班级。

请参阅下面的代码段2.

SNIPPET 1

/* Collect all first and second h1 that are direct descendants 
(i.e. children) of any anchor and put them in a NodeList.*/
var x2H1 = document.querySelectorAll('a > h1:nth-child(-n+2)');

// Total number of h1 in NodeList x2H1
var xQty = x2H1.length;

// Declare increment variable for 'for' loop
var i;

// 'for' loop will add the class .firstTwo to each item in NodeList
for (i = 0; i < xQty; i++) {
  x2H1[i].classList.add('firstTwo');
}

.firstTwo {
  color: red;
  font-size: 50px;
}

<html>

<head>
</head>

<body>
  <header>
    <a>
      <h1>H1</h1>
      <h1>H1</h1>
      <div>
        <h1>Nested H1</h1>
      </div>
    </a>
  </header>
  <a>
    <div>
      <h1>Nested H1</h1>
    </div>
    <h1>H1</h1>
  </a>
  <section>
    <a>
      <h1>H1</h1>
      <h2>H2</h2>
    </a>
    <h1>H1 descendant of section</h1>
  </section>
  <a>
    <h1>H1</h1>
    <h1>H1</h1>
    <h1>H1 third child of anchor</h1>
  </a>

注意：为简单起见，我使用的是classList.add()，而不是查看h1是否有类。如果由于某种原因你需要在h1 中添加一个类但是没有将类添加到有类的h1中（因为逻辑在OP的代码中），那么使用Snippet 2：

SNIPPET 2

/* Collect all first and second h1 that are direct descendants 
(i.e. children) of any anchor and put them in a NodeList.*/
var x2H1 = document.querySelectorAll('a > h1:nth-child(-n+2)');

// Total number of h1 in NodeList x2H1
var xQty = x2H1.length;

// Declare increment variable for 'for' loop
var i;

/* 
'for' loop will:
  1. Determine if h1 has a class already
  2. If it does, then it is logged in 
  the console as being so.
  3. if not, then it will add the class
  .firstTwo to it.
*/
for (i = 0; i < xQty; i++) {
  x2H1[i].getAttribute('class') ? console.log('Already has a class') :
    x2H1[i].classList.add('firstTwo');
}

.firstTwo {
  color: red;
  font-size: 50px;
}

<html>

<head>
</head>

<body>
  <header>
    <a>
      <h1 class='skip'>H1</h1>
      <h1>H1</h1>
      <h1>H1</h1>
      <div>
        <h1>Nested H1</h1>
      </div>
    </a>
  </header>
  <a>
    <div>
      <h1>Nested H1</h1>
    </div>
    <h1>H1</h1>
  </a>
  <section>
    <a>
      <h1>H1</h1>
      <h2>H2</h2>
    </a>
    <h1>H1 descendant of section</h1>
  </section>
  <a>
    <h1>H1</h1>
    <h1>H1</h1>
    <h1>H1 third child of anchor</h1>
  </a>

使用.getAttribute('class')实际上会检测属性类是否分配了值。所以，例如：

 <h1 class=''>H1 with class but no value</h1>

如果作为一个例子，这将被确定为真实：

 <h1 class='klass'>H1</h1>

如果你想确保每个类都有一个值，那么正如Alexy S.建议的那样，是检测h1是否具有类值的方法。例如：

    if (x2H1[i].classList.length === 0) {
        x2H1[i].classList.add("firstTwo");
    }

将类添加到标记名称

3 个答案:

SNIPPET 1

SNIPPET 2