在线编程题： 我们平时在操作DOM节点的时候，经常会碰到对一类元素进行一些统一的操作，例如为一组元素修改class属性，以改变其显式的效果；或者为一组元素绑定某个事件处理函数等。 任务： 使用querySelectorAll方法查找到所有class属性为row的tr元素，然后为其class属性添加一个light值。将功能代码填写在注释的code部分。 传统使用纯JS来实现这个功能的思路就两步，一是查找到所有class值为row的tr标签，这个我们可以使用querySelectorAll(“tr.row”)来找到这些元素；然后是遍历这个结果集，为其中的每个元素的class属性加上一个“light”。

// 选取所有class为row的tr元素，并为其添加class属性为light
document.querySelectorAll('tr.row').forEach(function(tr){
    tr.classList.add('light');
});

相关问题

javascript学习手册十三：html dom——文档元素的操作（一）

### 回答1：
HTML DOM（文档对象模型）是一种编程接口，允许程序访问和操作HTML文档中的元素。使用JavaScript来操作HTML DOM可以让网页具有交互性和动态性。

在JavaScript中，可以使用getElementById，getElementsByTagName和getElementsByClassName等方法来获取页面上的元素。例如，通过getElementById("myId")可以获取id为"myId"的元素。

操作元素的属性和内容也很简单，可以使用如下方法：

- 修改元素的属性：element.attribute = new value
- 访问元素的属性：element.attribute
- 修改元素的内容：element.innerHTML = new content
- 访问元素的内容：element.innerHTML

通过操作HTML DOM，可以实现各种交互效果和动态效果。例如，可以在点击按钮时显示或隐藏元素，或在输入框中输入文本时实时更新页面内容等。

### 回答2：
HTML DOM是JavaScript操作网页中元素和属性的主要方式之一。在HTML DOM中，文档元素是指HTML页面中所有元素的根节点。文档元素的操作包括获取元素、创建元素、删除元素、修改元素属性等。

获取元素是HTML DOM操作的重要一环。在JavaScript中，可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获得HTML页面中的元素。其中getElementById()方法可以通过元素的ID获取该元素的引用，常用于根据ID修改元素的属性或内容。而getElementsByTagName()方法可以通过标签名获取HTML页面中所有该标签的元素，例如获取所有的h1元素，常用于对整个页面的控制。getElementsByClassName()方法可以通过class属性获取HTML页面中所有具有该class的元素。

创建元素是向HTML页面中添加元素的重要方式。可以使用createElement()方法创建一个新元素，然后使用appendChild()方法将其添加到现有元素中。例如，创建一个新的p元素，并将其添加到body元素中可以使用以下代码：

var newPara = document.createElement("p");
var textNode = document.createTextNode("This is a new paragraph.");
newPara.appendChild(textNode);
document.body.appendChild(newPara);

删除元素也是HTML DOM中的一个常用操作。可以使用removeChild()方法删除现有元素，例如：

var parent = document.getElementById("parent-id");
var child = document.getElementById("child-id");
parent.removeChild(child);

修改元素属性是HTML DOM中的另一个核心操作。可以使用setAttribute()方法修改元素的属性值，例如：

var element = document.getElementById("my-id");
element.setAttribute("class", "new-class");

可以通过HTML DOM操作文档元素，实现对页面元素和属性的各种操作。掌握HTML DOM的知识，可以更好地控制和管理HTML页面。

### 回答3：
HTML DOM是JavaScript操作网页元素的主要方式之一，它的核心在于文档对象模型（DOM，Document Object Model），需要熟悉DOM才能灵活操作网页元素。文档元素是HTML页面中的根元素，它是其他所有元素的祖先元素，也是HTML DOM操作的基础。

一、获取元素

在JavaScript中，我们可以通过各种方式来获取文档元素，例如getElementById()、getElementsByTagName()、getElementsByClassName()等。其中，通过id、标签名和类名获取元素是最常用的三种方法。

1. getElementById()

此方法用于获取具有指定id属性的元素，其语法为document.getElementById(id)。id属性在整个HTML文档中应该是唯一的。

示例：获取id为“demo”的元素

var demo = document.getElementById("demo”);

2. getElementsByTagName()

此方法用于获取具有指定标签名的元素，其语法为document.getElementsByTagName(tagname)。

示例：获取所有p元素

var pList = document.getElementsByTagName("p");

3. getElementsByClassName()

此方法用于获取具有指定类名的元素，其语法为document.getElementsByClassName(classname)。

示例：获取类名为“red”的元素

var redList = document.getElementsByClassName("red");

二、改变元素

有很多种方法可以改变文档元素的属性和样式，下面列举一些常见的方法：

1. 修改元素的文本内容

我们可以通过innerHTML属性和innerText属性来修改元素的文本内容。

innerHTML属性用于改变元素的HTML内容，其语法为element.innerHTML=new html content；

innerText属性用于改变元素的纯文本内容，其语法为element.innerText=new text content；

2. 修改元素的样式

我们可以通过style属性来修改元素的样式，其中style属性包含了元素的所有样式属性。

示例：将id为“demo”的元素背景色改为红色

document.getElementById("demo").style.backgroundColor = "red";

3. 创建新元素

我们可以使用document.createElement()方法来创建新元素，并通过appendChild()方法将其加入到指定的元素内。

示例：创建一个新的p元素

var newP = document.createElement("p");

4. 删除元素

我们可以使用parentNode.removeChild()方法来删除指定的元素。

示例：删除id为“demo”的元素

var demo = document.getElementById("demo");
demo.parentNode.removeChild(demo);

三、总结

通过这篇文章的学习，我们了解了HTML DOM的基础知识和基本操作方法，例如获取元素、改变元素的属性和样式以及创建和删除元素等。掌握这些操作方法可以帮助我们更好地操作网页元素，从而实现丰富多彩的网页效果。

如何减少对dom节点的操作

减少对DOM节点的操作可以提高网页性能和用户体验。以下是一些减少DOM操作的方法：

1. 缓存DOM查询结果：避免重复查询相同的DOM节点，可以将它们缓存在变量中，这样可以避免不必要的查询和操作。

2. 批量修改DOM：减少对DOM的操作次数，可以将多个变更操作合并为一个，例如使用DocumentFragment，一次性将多个元素插入到DOM中。

3. 使用事件委托：将事件处理程序绑定到祖先元素上，而不是每个子元素上，这样可以减少事件处理程序的数量，从而提高性能。

4. 使用CSS3动画：使用CSS3动画代替JavaScript动画可以减少对DOM的操作，因为CSS3动画会在浏览器中运行，而不是在JavaScript中。

5. 避免强制同步布局：尽量避免强制同步布局，因为这会导致浏览器重新计算布局，增加了DOM操作的成本。