二十，DOM查询的其他方法（table增删改练习，a的索引问题）

一，DOM查询的方法

1、在document中有一个属性body ，它保存的是body引用。document.documentElement保存的是html标签

2、document.all获取页面中所有的元素， *也是获取页面中所有的元素。可以获取body标签

3、根据className获取元素，getElementByClassName()可以根据class属性获取一组元素节点对象，但是IE8及以下浏览器不支持。

4、querySelector()选择器，

需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象。虽然IE8中没有getElementByClassName()但是可以使用document.querySelector（）（IE8及以上浏览器支持）代替。

注意：document.querySelector()返回的结果不是集合，它只会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回最后一个，

5，querySelectorAll(),方法和上面的类似，不同的是它会将符合条件的元素封装到一个数组中返回，

二，DOM增删改方法

1、把新的节点添加到指定的节点

第二种简单的方法：

使用innerHTML也可以实现DOM增删改的一些操作。上面增加子节点的方法，在查看源代码时我们会发现所有的子元素都会变色，也就是它将本来的子元素都删了再重新添加的，而下面这种方法只有新添加的会变色。一般情况下我们是两种方法结合使用，

2、在 指定的子节点前插入新的子节点，都是父节点调用

3，替换子节点，都是父节点调用

4，删除子节点，

常用方法：

5，读取HTML代码

6，设置HTML代码

三，DOM增删改练习

要求如下：

1，实现删除员工信息

1）点击超链接删除员工所有信息

       我们首先需要注意的是点击超链接会默认跳转页面，但此时我们删除员工信息不需要跳转页面。我们需要阻止默认行为，取消超链接的默认行为有两种简单的方法：return false 和<a href="javascript:;">，这两种方法否可以阻止默认行为。

准备工作做好了，下面我们要实现删除员工信息了。首先获取所有的超链接，为所有的超链接添加单击事件（取消默认事件），我们需要删除的是整行tr信息，它是超链接的祖先元素。而且我们是遍历所有的超链接为每个超链接添加单机事件，我们这里还需要判断一下this，在这里当我们点击哪个超链接this就是指向谁，所以获取tr = this.parentNode.parentNode;然后删除整个tr就可以了。需要注意的是，我们在删除内容的时候，需要给用户提示，以防止用户误删。

删除之前弹出提示框，需要有确认和取消按钮，此时用到confirm(),点击确认返回true,点击取消返回false。我们在弹出提示框中应该提醒用户删除对象的名字，所以还需要获取tr的第一个子元素td里面的文本内容 // var name = tr.getElementsByTagName("td")[0].innerHTML;   var name = tr.children[0].innerHTML；这两种方法都可以获取第一个td里面的文本内容。好删除工作完成。

2）点击提交按钮，将下面输入的员工信息添加到上面的表格

在这个案例中，提交按钮并没有放到表单中，所以在点击提交时，并不会跳转页面，无需取消默认行为。如果是放在表单里面，我们还需要取消提交的默认行为。

首先获取提交用户填写的信息。创建元素节点，将信息保存到元素中；创建文本节点，将获取的用户信息添加到文本节点。

tr节点创建好以后将其添加给table,    // employeeTable.appendChild(tr);

在这里我们采用的是一种麻烦的方法来添加新节点。在此需要注意3个问题。

首先是，此处我们添加的超链接在浏览器中显示是黑色的，我们无法点击，是因为我们没有为新添加的超链接设置href属性。

我们为href添加此属性后，超链接会变成蓝色。

此时，我们再查看一下网页源代码，我们会发现，新添加的tr与原本的tr不是兄弟节点，因为在table中还有一个tbody标签，虽然我们的代码没有写，但是浏览器在解析时会自动为我们添加，而我们是给table添加儿子节点tr这样就导致我们添加的tr与原来的tr不是兄弟节点，如果我们用tbody设置样式的话，就会不一致。所以我们应该是为tbody添加tr

好了网页显示没有问题了，此时我们点击删除我们新添加的员工信息，发现不能实现！！！这是因为我们的删除函数是在网页加载后就立即绑定，也就是删除函数在新增函数前被绑定，我们新加的tr没有绑定删除函数，所以我们需要为新添加的tr绑定删除函数。这两处的删除函数都是一样的，所有我们可以把删除函数提取出来，放到全局。

然后调用删除函数，和为新添加的tr添加delA()方法

至此完美实现我们需要的功能，但是代码还有很大的改进空间。

完整的代码如下：

代码改进的地方主要是添加员工信息，这里我们采用字符串拼接就会简单很多。

我们也可以将tr通过拼接的方式添加到tbody中，都在页面展示没有任何问题，但是我们需要的是，此时在点击添加时我们会发现，所有的tr都会跟着变动，也就说说所有的tr（包括之前代码里写的）都会重新创建，这样代码的性能不会太好。而且拼接tr也会存在其他的问题，我们不要使用。

 3）a的索引问题

在此处我们使用的是this,

但实际上我们就是想为遍历的a找到它的祖先元素，那我们是否可以使用ar tr = aS[i].parentNode.parentNode;呢？答案是否定的，这就涉及到索引问题。下面代码变量命名与前面的不一样，

我们在循环内部输出allA[i]是Undefined，我们输出alert(i)发现它会不是0,1,2,……而是原数组的长度allA.length，

我们来看一下代码的执行流程。首先页面加载完后，Onload里面的代码执行。先获取所有的超链接，再执行for循环，然后为每一个超链接去绑定点击响应函数，for循环会 在页面加载完成后立即执行（先执行），而响应函数会在超链接被点击时才执行（后执行）。当响应函数执行时，for循环以及执行完毕，for停止执行时是allA.length，所以在响应函数里面输出i会是allA.length的长度。