1.获取元素节点
•通过document对象调用
1.getElementById()–通过id属性获取一个元素节点对象
2.getElementsByTagName()–通过标签名获取一组元素节点对象
这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中,不是数组。
3.getElementsByName()–通过name属性获取一组元素节点对象
后两个都是elements,复数意味可以多个相同标签或名字的对象
2.获取元素节点的子节点
•通过具体的元素节点调用(递归,必须先找到该节点,再调用其方法或属性,不能直接使用document,那样找的是全局的)
1.getElementsByTagName()–方法,返回当前节点的指定标签名后代节点
2.childNodes–属性,表示当前节点的所有子节点,获取包括元素、文本节点的所有子节点。DOM标签之间的空白也会当成文本节点。返回的是一个包含节点的类数组列表(可以用数组下标形式寻找)
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
city有9个子节点,5个空白节点(ul标签和li标签之间空白,li标签和li标签之间空白),四个元素节点(li标签)
<ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li> <li>首尔</li></ul>
这样写就只用4个节点(li标签)
3.firstChild–属性,表示当前节点的第一个子节点(包括空白文本节点)
4.lastChild–属性,表示当前节点的最后一个子节点
5.children–属性 。可以获取当前元素的所有子元素,不包括文本节点。返回的是一个包含节点的类数组列表。
6.firstElementChild-属性。 获取当前元素的第一个子元素(不包括文本节点,不包括ie8及以下版本)
3.获取元素父节点和兄弟节点
通过具体的节点调用
1.parentNode–属性,表示当前节点的父节点
2.previousSibling–属性,表示当前节点的前一个兄弟节点(可能获取空白的文本节点)
3previousElementSibling-属性,获取当前节点的前一个兄弟节点(不会获得空白文本节点,IE8及以下不可用)
4.nextSibling–属性,表示当前节点的后一个兄弟节点
4.元素节点的属性
•获取,元素对象.属性名例:
element.value(文本框的value值就是文本框中填写的内容)
element.id
element.className(class保留字因此采用className)
•设置,元素对象.属性名=新的值例:
element.value = “hello”
element.id = “id01”
element.className = “newClass”
5.其他属性
innerHTML()-获取和设置标签内部的html代码(开始结束标签之间夹的文字),对于自结束标签没有意义。(没有结束标签的标签)
•nodeValue–文本节点可以通过nodeValue属性获取和设置文本节点的内容
/* innerText
* -该属性可以获得元素内部的文本属性
* -他和innerHTML区别,会自动将html标签去掉。
*/
节点不一定是HTML元素,也可能是空白文本节点,标签和标签之间的空白。< br>这种简单的换行标签也是节点。