节点
- 文档节点
- 元素节点
- 属性节点
- 文本节点
- 节点的属性:nodeName、nodeType、nodeValue
- 文本节点的nodeValue属性值就是文本内容
获取元素节点
- getElementById
根据id属性获取一个元素节点对象 - getElementsByTagName
可以根据标签名来获取一组元素节点对象,这个方法会返回一个类数组对象,所有查询到的元素都会封装到对象中 - getElementsByName
可以根据name属性来获取一组元素节点对象
- innerHTML用于获取元素内部的HTML代码。对于自结束标签,这个属性没有意义。
- 如果需要读取元素节点属性,直接使用元素.属性名。
元素.id
元素.name
元素.value
但是class属性不能采用这种方式,读取class属性时需要使用元素.className
- getElementsByClassName
根据class属性值获取一组元素节点对象,不支持IE8及以下的浏览器。 - querySelector
- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象。
- 支持IE8浏览器,在IE8中可以使用该方法代替getElementsByClassName()
- 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个元素
- querySelectorAll
- 该方法和querySelector()用法类似。不同的是它会将符合条件的元素封装到一个数组中返回,即使符合条件的元素只有一个,他也会返回数组。
获取元素节点的子节点
通过具体的元素节点调用
- getElementsByTagName()
方法,返回当前节点的指定标签名后代节点 - childNodes
- 属性,表示当前节点的所有子节点
- 该属性会获取包括文本节点在内的所有节点。根据DOM标签,标签间的空白也当做文本节点。注意:在IE8及以下的浏览器中,不会将空白文本当成子节点
- children属性可以获取当前元素的所有子元素,不包括文本节点
- firstChild
- 属性,表示当前节点的第一个子节点(包括空白文本节点)
- firstElementChild属性获取当前元素的第一个子元素(不包括空白文本节点),不支持IE8及以下的浏览器,如果需要兼容他们,尽量不要使用
- lastChild
属性,表示当前节点的最后一个子节点
- innerText属性可以获取到元素内部的文本内容,它和innerHTML类似,不同的是它会自动将html标签去除。
获取父节点和兄弟节点
- parentNode
属性,表示当前节点的父节点 - previousSibling
- 属性,表示当前节点的前一个兄弟节点(包括空白节点)。
- previousElementSibling属性,获取前一个兄弟元素,IE8-不支持
- nextSibling
属性,表示当前节点的后一个兄弟节点(包括空白节点)。
- 文本框的value值,就是文本框中的内容
Dom查询的其他方法
- document.body保存的是body的引用
- document.documentElement保存的是html根标签
- document.all代表页面中所有的元素,相当于
document.getElementsByTagName('*')
DOM修改
- document.createElement()
- 可以根据标签名创建一个元素节点对象
- 参数:标签名
- document.createTextNode()
- 可以根据文本内容创建一个文本节点对象
- 参数:文本内容
- 父节点.appendChild(子节点)
- 向父节点中添加指定的子节点
- 父节点.insertBefore(新节点,旧节点)
- 将一个新的节点插入到旧节点的前边
- 父节点.replaceChild(新节点,旧节点)
- 使用一个新的节点去替换旧节点
- 父节点.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
};
}