JavaScript的DOM操作
什么是DOM?
如下图解
- Document:整个html文件都成为一个document文档
- Element:所有的标签都是Element元素
- Attribute:标签里面的属性
- Text:标签中间夹着的内容为text文本
-
Node:document、element、attribute、text统称为节点node.
![](https://images2018.cnblogs.com/blog/1370593/201806/1370593-20180613131518197-2103865259.png)
1、 Document对象
以下两个方法很重要,但是在手册中查不到!
创建文本节点:document.createTextNode()
创建元素节点:document.createElement()
2、Element对象
我们所认知的html页面中所有的标签都是element元素
向元素添加新的子节点,作为最后一个子节点。 |
|
返回元素的首个子节点。 |
|
返回元素节点的指定属性值。 |
|
设置或返回元素的内容。 |
|
在指定的已有的子节点之前插入新节点。 |
|
返回元素的最后一个子元素。 |
|
把指定属性设置或更改为指定值。 |
|
从元素中移除子节点。 |
|
替换元素中的子节点。 |
3、Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
![](https://images2018.cnblogs.com/blog/1370593/201806/1370593-20180613131738408-562362994.png)
4、DOM中对appendChild()方法的运用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态添加城市</title> <script> window.onload = function(){ document.getElementById("btn").onclick = function(){ //1.获取ul元素节点 var ulEle = document.getElementById("ul1"); //2.创建城市文本节点 var textNode = document.createTextNode("深圳");//深圳 //3.创建li元素节点 var liEle = document.createElement("li");//<li></li> //4.将城市文本节点添加到li元素节点中去 liEle.appendChild(textNode);//<li>深圳</li> //5.将li添加到ul中去 ulEle.appendChild(liEle); } } </script> </head> <body> <input type="button" value="添加新城市" id="btn"/> <ul id="ul1"> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body> </html>