Appearance
DOM 元素
创建和增加 DOM 元素
真实项目中，我们偶尔会在 js 中动态创建 html 标签，然后把其增加到页面中
javascript
var div1 = document.getElementById('div1')
// 添加新节点
var p1 = document.createElement('p') // 在 js 中动态创建一个 html 标签
p1.innerHTML = 'this is p1'
div1.appendChild(p1) // 把当前创建的新元素添加到容器的末尾位置
// 移动已有节点。注意，这里是“移动”，并不是拷贝
var p2 = document.getElementById('p2')
div1.appendChild(p2)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
inserBefore
容器。inserBefore（新元素、老元素） 在当前容器中，把新创建的元素增加到老元素之前
javascript
// 创建
var oDiv = document.createElement('div');
oDiv.id='div1';
oDiv.className = 'box';
// 添加到页面中
document.body.appendChild(oDiv);
document.body.inserBefore(oDiv,box2);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
javascript
var link = document.createElement('a');
link.href = 'http://www.baidu.com?name=1&age=2#haha'
consloe.dir(link);
// hash:存储饿哈希值 '#haha'
// hostname:域名 'www.baidu.com'
// pathname:路径 '/stu/'
// protocol:协议 'http:'
// search:问号传递参数值 '?nname=1&age=2'
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
真实项目中很多需要通过动态创建元素来完成的，其中有一个需求：解析一个 url 地址每一部分的信息（包括问号传值的参数值）
- 纯字符串拆分截取
- 编写强大的正则，捕获到需要的结果
- 通过动态创建一个 a 标签，利用 a 标签的一些内置属性来分别获取每一部分的内容
javascript
function queryURLParameter(url){
var link = document.createElement('a');
link.href=url;
var search = link.search,
obj = {}'
if(search.length===0) return;
search = search.substr(1).split(/&|=/g);
for(var i=0;i<search.length;i+=2){
var key = search[i],
value = search[i+1];
obj[key]=value;
}
link = null;
return obj;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
获取父元素
javascript
var div1 = document.getElementById('div1')
var parent = div1.parentElement
1
2
3
2
3
获取子元素
javascript
var div1 = document.getElementById('div1')
var child = div1.childNodes
1
2
3
2
3
删除节点
javascript
var div1 = document.getElementById('div1')
var child = div1.childNodes
div1.removeChild(child[0])
1
2
3
4
2
3
4
修改删除克隆 DOM 元素
removeChild
- 容器。removeChild（元素）
- 在当前容器中把每一个元素移出掉
replaceChild
- 容器。removeChild（新元素，老元素）
- 把原有的元素克隆一份一模一样的，false: 只克隆当前元素本身，true: 深度克隆，吧当前元素本身以及元素的所有后代都进行克隆
[set/get/remove]Attribute
javascript
给当前元素设置/获取/移出属性的(一般操作的都是它的自定义属性)
box.setAttribute('myIndex',0)
box.getAttribute('myIndex')
box.removeAttribute('myIndex')
1
2
3
4
2
3
4
使用 xxx.index=0 和 xxx.setAttribute('index',0) 这两种设置自定义属性的区别
xxx.index : 是吧当前操作的元素当做一个普通对象，为其设置一个属性名
xxx.setAttribute: 把元素当做特殊的元素对象来处理，设置的自定义属性是和页面结构中的 DOM 元素映射在一起的
JS 中获取的元素对象，我们可以把他理解为两种角色：
- 与页面 HTML 结构无关的普通对象
- 与页面 HTML 结构存在映射关系的元素对象
元素对象中的内置属性，大部分都和页面的标签存在映射关系：
xxx.style.backgroundColor = 'xxx' 此时不仅把 js 中对象对应的属性值改变了，而且也会映射到页面的 html 标签上（标签中有一个 style 行内样式，元素的样式改变了）
xxx.className = 'xxx'此时不仅是吧 js 对象中的属性值改变了，而且页面中的标签增加了 class 样式类（可以看见的）
元素对象中的自定义属性：xxx.index=0
仅仅是吧 js 对象中增加了一个属性名（自定义的），和页面中的 html 没啥关系（在结构上看不见）
xxx.setAttribute: 通过这种方式设置的自定义属性和之前提到的内置属性差不多，都是和 html 结构存在映射关系的（设置的自定属性可以呈现在结构上）