Question

我在容器内生成内容后，尝试获取node.firstChild元素的#root。我希望它是第一个div，因为当我看到开发控制台中的元素时，那是我看到的第一个孩子。我不确定这个#text的来源，甚至是什么意思。

请帮助我理解：

＃text是什么（显然它是某种类型的文字，但我不会看到它）
为什么它显示而不是我的容器的firstChild实际应该是div.each-result
应该注意我在CodePen中运行此代码
我也知道我也可以使用Node.firstElementChild，但我想了解目前出现的问题。

＆＃13;

const leftArrow = document.querySelector('#left-arrow');
const rightArrow = document.querySelector('#right-arrow');
const rootDiv = document.querySelector('#root');
const generateButton = document.querySelector("#button-generate");
//This code basically generates the content within the div
generateButton.addEventListener("click", () => {
  for (let i = 0; i < 10; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("each-result");
    newDiv.appendChild(addImg("https://uk.usembassy.gov/wp-content/uploads/sites/16/please_read_icon_150x150.jpg"));
    rootDiv.appendChild(newDiv);  
  }
  console.log(rootDiv.firstChild);
});

//These enable the arrow to scroll through the dynamically generated content
leftArrow.addEventListener('click', () => {
 //use
});
rightArrow.addEventListener('click', () => {
  alert("right arrow works");
});




//Simple function to create and image element with the src attribute set in one line
function addImg(url) {
  const newImg = document.createElement("img");
  newImg.setAttribute("src", url);
  return newImg;
}

＆＃13;

html, body {
  height: 100%;
}

button {
  position: relative;
  z-index: 1
  width: auto;
  height: 50px;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  top: 15%;
  z-index: 0
}

.result-container {
  display: flex;
  align-items: center;
  border: 1px solid black;
  width: 80%;
  height: 200px;
  position: relative;
  flex-flow: row no-wrap;
  overflow: hidden;
  
}

.each-result {
  height: 150px;
  width: 150px;
  border: 3px dotted red;
  margin: 1%;
}
img {
  height: 100%;
  width: auto;
}
.nav-arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  position: absolute;
  background: clear;
  pointer-events: none;
}
#left-arrow, #right-arrow {
  pointer-events: auto;
}

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
  <div class="nav-arrows">
      <button id="left-arrow"><i class="fas fa-arrow-alt-circle-left"></i>
      </button>
        <button id="right-arrow"> <i class="fas fa-arrow-alt-circle-right"></i>
      </button>
    </div>
  <div id="root" class="result-container">
  </div>
</div>
<button id="button-generate">Generate Content</button>

＆＃13;

Answer 1

请看这里的第一个例子：Node.firstChild

在上面，控制台将显示＆＃39; #text＆＃39;因为文本节点是   插入以保持开头末尾之间的空白<p>   和<span>标签。任何空格都会创建一个#text节点   单个空格到多个空格，返回，制表符等。

在结束</span>和之间插入另一个#text节点   </p>代码。

如果从源中删除此空格，则#text节点不会   insert和span元素成为段落的第一个孩子。

正如你自己建议的那样，ParentNode.firstElementChild是这种情况下最好的方式。

使用node.firstChild（）时无法确定此#text的来源

1 个答案: