Document Object Model文档对象模型
文档:标记型文档 (HTML/XML) 对象:封装属性和行为(方法) 模型:共性特征的体现
通过DOM的方法,把HTML全部(元素(标签)、文本、属性)都封装成了对象。
文本
Document:代表整个文档 Eelment:元素(标签)对象 Attribute:属性对象 Node:节点对象
DOM想要操作标记型文档先解析。(解析器)
DOM解析HTML(浏览器就可以HTML)
<ul>
<li>北京<>
<li>上海<>
</ul>
//创建元素对象<li><>
li=document.createElement
//创建文本对象,北京
text=document.createTextNode
//把深圳添加到li的下面,作为李的子节点
li.appendChild(text);
//把li添加到ul下面,作为ul的子节点
ul.appendChild(li) //ul 通过ul的属性去拿他的对象
1.Document:代表整个文档。
* 方法:
getElementById("id的值"); //通过元素的id的属性获取元素(标签)对象。
getElementsByName("name属性值"); //通过名称获取元素对象的集合(返回数组)
getElementsByTagName("标签名称"); //通过标签名称获取元素对象的集合(返回数组)
write("文本的内容(html的标签)") //把文本内容写到浏览器上。
createElement("元素名称"); //创建元素对象
createTextNode("文本内容") //创建文本对象
appendChild("子节点") //添加子节点
<span id=""></span>
2.Element对象
- 获取元素对象
- getAttribute(“属性名称”); 获取属性的值
- setAttribute(“属性名称”,“属性的值”); 设置或者修改属性的值
- removeAttribute(“属性名称”); 删除属性
- 获取元素下的所有子节点()
- ul.getElementsByTagName();
3.Node:节点对象
- nodeName :节点名称
- nodeType :节点类型
- nodeValue :节点的值
- parentNode 获取父节点(永远是一个元素节点)
- firstChild 第一个节点 firstElementChild?第一个节点
- lastChild最后一个节点、 lastElementChild 最后一个节点
- nextSibling 下一同级节点 nextElementSibling?下一同级节点
- previousSibling 上一同级节点 previousElementSibling?上一同级节点
<ul>
<li>北京<>
</ul>
* 如果通过ul获取北京的子节点,使用是 ul.firstElementChild; 获取北京的子节点(IE9-11 Chrome FireFox)
* 但是如果IE6-8,需要使用firstChild;
<span id="spanId">
文本内容
</span>
*使用span的标签获取span中间的文本内容(也是对象),需要使用`firstChild`;(不管是什么浏览器)*
- 方法
- hasChildNodes() 检查是否包含子节点
- hasAttributes() 检查是否包含属性
- appendChild(node) 父节点调用,在末尾添加子节点
- insertBefore(new,old) 父节点调用,在指定节点之前添加子节点
- replaceChild(new,old) 父节点调用,替换节点
- removeChild(node) 父节点调用,删除节点
- cloneNode(boolean) 不是父节点调用,复制节点
- boolean :如果是true,复制子节点
- :如果是false,不复制子节点,默认是false
4.innerHTML :获取和设置文本内容。
- innerHTML属性:
- 获取文本内容
- 设置文本内容