JavaScript-DOM解析_Javascript_Html_Dom

JavaScript-DOM解析

javascript html dom

JavaScript-DOM解析,javascript,html,dom,Javascript,Html,Dom,所以，我在一份试卷上得到了这个问题，却从来没有真正弄明白怎么做我知道如何通过DOM树进行基本遍历，但这似乎超出了我的范围任何帮助都将不胜感激创建一个JavaScript函数，调用该函数时，将HTML页面的和元素中的所有文本的背景色变为蓝色。但是，您不能在此处使用getElementByTagName（或任何其他按名称查找元素的内置函数）。。。相反，您需要逐个元素遍历DOM树。请记住，元素可能嵌套在其他元素中另外，不允许使用jQuery。。。只是澄清一下……我的问题是我不知道如何编写函数

所以，我在一份试卷上得到了这个问题，却从来没有真正弄明白怎么做

我知道如何通过DOM树进行基本遍历，但这似乎超出了我的范围

任何帮助都将不胜感激

创建一个JavaScript函数，调用该函数时，将HTML页面的

和

元素中的所有文本的背景色变为蓝色。但是，您不能在此处使用

getElementByTagName

（或任何其他按名称查找元素的内置函数）。。。相反，您需要逐个元素遍历DOM树。请记住，元素可能嵌套在其他元素中

另外，不允许使用jQuery。。。

只是澄清一下……我的问题是我不知道如何编写函数来遍历树和更改背景颜色等。

您可以使用这个非常简单的函数：

function changeBackgroundColor() {
  // predefine our element variable
  var element,
    // get all the nodes in the document
    nodes = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT);
  // loop through the nodes
  while(element = nodes.nextNode()) {
    // check if the current node is a "<br />" or "<div />" element
    if(element.tagName.toLowerCase() == "br" || element.tagName.toLowerCase() == "div") {
      // change the background color of the current element
      element.style.backgroundColor = "blue";
    }
  }
}

以下是一些简单的HTML，您可以在其上测试该函数：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>JS DOM Question</title>
</head>
<body>
  <div>Hello World!</div>
  <p>Good day World</p>
  <span>Good evening World!</span>
  <i>Good night World!</i>
  <div>Good morning World!</div>
</body>
</html>


JS DOM问题
你好，世界！
世界你好
晚上好，世界！
晚安，世界！
早上好，世界！

注意：
元素用于断行，实际上不应该在其中存储内容

祝你好运，万事如意。

解析html以获得DOM。然后遍历它在DOM中查找和/或更改信息，但不会解析DOM。我使用了错误的术语。刚刚编辑过。到目前为止你能尝试什么？您可以分享您的一次尝试的片段吗？为什么需要一个函数来专门获取

？您只需迭代整个DOM树，并对所有元素进行等效操作。

s中没有文本

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>JS DOM Question</title>
</head>
<body>
  <div>Hello World!</div>
  <p>Good day World</p>
  <span>Good evening World!</span>
  <i>Good night World!</i>
  <div>Good morning World!</div>
</body>
</html>