对节点进行查询
- doaument代表整个文档
document.getElemnetByID();
var div = document.getElemnetByID();//元素id在IE8以下的浏览器不区分大小写,而且返回匹配name值的元素
document.getElementsByTagName();//通过标签名查找 实时的
var div = document.getElementsByTagName("div");//类数组(DOM所生成的大多为类数组)
document.getElementsByName();//返回带有给定name特性的所有元素。常用来取得单选按钮。
非实时:css选择器。IE7及以下版本没有。选择出来的元素不是实时的,是副本。
document.querySelector();
var strong = document.querySelector("div>span strong.demo");//选择div直属span下class名为demo的strong标签
- document.querySelectorAll();//css选择器。IE7及以下版本没有。选择出来的元素不是实时的,是副本。
遍历节点树
- parentNode:父节点(最顶端parentNode为”#document”)
- childNode: 子节点
<div>
123
<!-- comment-->
<strong></strong>
<span></span>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
console.log(div.childNodes.length); //7个节点
</script>
- firstChild:第一个子节点;lastChild:最后一个子节点
- nextSibling:后一个兄弟节点 previousSilbing:前一个兄弟节点
遍历元素节点树(除children,IE9以下不兼容)
- parentElement:返回当前元素的父元素节点
- children:只返回当前元素的元素子节点
- firstElementChild:第一个子元素
- lastElementChild:最后一个子元素
- previousElementSibling:指向前一个同辈元素
- nextElementSibling:指向后一个同辈元素
节点四个属性
- nodeName 元素标签名,大写形式,只读
- nodeValue:text节点或Comment节点的文本内容,可读写
- nodeType:该节点的类型,只读
- attributes:Element节点属性集合
- hasChildNodes:返回true或false
DOM结构树
DOM基本操作
- getElementById方法定义在Document.prototype上,即Element节点上不能使用。
- getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document不能使用(xml document,Element)
- getElementsByTagName方法定义在Document.prototype和Element.prototype上
- HTMLDocument.prototype定义了一些常用属性,body,head分别指HTML文档中的标签
- Document.prototype上定义了documentElement属性,指代文档的根元素,在HTML文档中,它总指代元素
document.documentElement代表html
- getElementsByClassName、querySelectorAll、querySelectorAll在Document.prototype,Element.prototype类中均有定义
增
- document.createElement();//创建元素节点
var div = document.createElement('');
- document.createTextNode();//创建文本节点
- document.createComment();//创建注释
- document.createDocumentFragment();
插
- PARENTNODE.appendChild();
- PARENTNODE.insertBefore();//插在前面
div.insertBefore(a,b);//在div下的a插入在b之前
删
- parentNode.removeChild();//剪切式删除,返回删除的标签
- child.remove();//销毁,无返回值
替换
- parentNode.replace(new,orgin);
Element节点属性
- innerHTML
<div></div>
var div = getElementByTagName('div')[0];
div.innerHTML = "123";//div的内容变为123
div.innerHTML += "456";//div的内容变为123456
div.innerHTML = "<span style='background-color:red;'>123</span>";//可写样式
- innerText
可赋值,但会覆盖结构和文本;可取文本内容
Element节点上的方法
- setAttribute(“属性名”,”属性值”);//添加行间属性(可以自定义属性)
- getAttribute(‘属性名’);//读取行间属性值