DOM查询

节点

1. 文档节点
2. 元素节点
3. 属性节点
4. 文本节点

• 节点的属性：nodeName、nodeType、nodeValue
• 文本节点的nodeValue属性值就是文本内容

获取元素节点

1. getElementById
   根据id属性获取一个元素节点对象
2. getElementsByTagName
   可以根据标签名来获取一组元素节点对象，这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
3. getElementsByName
   可以根据name属性来获取一组元素节点对象

• innerHTML用于获取元素内部的HTML代码。对于自结束标签，这个属性没有意义。
• 如果需要读取元素节点属性，直接使用元素.属性名。
  元素.id
  元素.name
  元素.value
  但是class属性不能采用这种方式，读取class属性时需要使用元素.className

4. getElementsByClassName
   根据class属性值获取一组元素节点对象，不支持IE8及以下的浏览器。
5. querySelector

• 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象。
• 支持IE8浏览器，在IE8中可以使用该方法代替getElementsByClassName()
• 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个元素

6. querySelectorAll

• 该方法和querySelector()用法类似。不同的是它会将符合条件的元素封装到一个数组中返回，即使符合条件的元素只有一个，他也会返回数组。

获取元素节点的子节点

通过具体的元素节点调用

1. getElementsByTagName()
   方法，返回当前节点的指定标签名后代节点
2. childNodes

• 属性，表示当前节点的所有子节点
• 该属性会获取包括文本节点在内的所有节点。根据DOM标签，标签间的空白也当做文本节点。注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
• children属性可以获取当前元素的所有子元素，不包括文本节点

3. firstChild

• 属性，表示当前节点的第一个子节点（包括空白文本节点）
• firstElementChild属性获取当前元素的第一个子元素（不包括空白文本节点），不支持IE8及以下的浏览器，如果需要兼容他们，尽量不要使用

4. lastChild
   属性，表示当前节点的最后一个子节点

• innerText属性可以获取到元素内部的文本内容，它和innerHTML类似，不同的是它会自动将html标签去除。

获取父节点和兄弟节点

1. parentNode
   属性，表示当前节点的父节点
2. previousSibling

• 属性，表示当前节点的前一个兄弟节点（包括空白节点）。
• previousElementSibling属性，获取前一个兄弟元素，IE8-不支持

3. nextSibling
   属性，表示当前节点的后一个兄弟节点（包括空白节点）。

• 文本框的value值，就是文本框中的内容

Dom查询的其他方法

1. document.body保存的是body的引用
2. document.documentElement保存的是html根标签
3. document.all代表页面中所有的元素，相当于

document.getElementsByTagName('*')

DOM修改

1. document.createElement()

• 可以根据标签名创建一个元素节点对象
• 参数：标签名

2. document.createTextNode()

• 可以根据文本内容创建一个文本节点对象
• 参数：文本内容

3. 父节点.appendChild(子节点)

• 向父节点中添加指定的子节点

4. 父节点.insertBefore(新节点,旧节点)

• 将一个新的节点插入到旧节点的前边

5. 父节点.replaceChild(新节点,旧节点)

• 使用一个新的节点去替换旧节点

6. 父节点.removeChild(子节点)

• 删除指定的子节点
• 推荐方式：子节点.parentNode.removeChild(子节点)

使用innerHTML也可以完成DOM的增删改的相关操作，一般我们会两种方式结合使用。

city.innerHTML +="<li>广州</li>";

var li = document.creatElement("li");
li.innerHTML=“广州”;
city.appendChild(li);

补充知识点

• confirm()用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示出来。点击确认返回值为true，否则为false。
• 点击超链接后，默认行为会跳转页面，可以通过在单击响应函数内添加return false;来取消默认行为。
• for循环会在页面加载完成后立即执行，而响应函数会在事件触发时才执行，当响应函数执行时，for循环早已执行完毕

			var allA = document.getElementsByTagName('a');
            for(i = 0;i < allA.length;i++){
                alert("for循环正在执行" + i);//0,1,2
                allA[i].onclick = function(){
                    alert("响应函数正在执行" + i);//3
                };
            }