前端基础知识-DOM操做

DOM（Document Object Model 文档对象模型）

一、包含了整个页面的全部功能，能够经过调用方法的形式来对页面进行操做；

二、JavaScript与Dom的区别：

　　JavaScript是脚本语言，能够写逻辑性代码；而Dom是文档对象模型，能够直接操做页面；

　　JavaScript+Dom：能够有逻辑的操做页面

三、获取标签

 1 //直接获取标签
 2 document.getElementById('inner1');  //经过ID获取标签
 3 document.getElementsByClassName('inner');  //经过class获取标签数组
 4 document.getElementsByTagName('div');  //经过标签名称获取标签数组
 5 document.getElementsByName('username');  //经过标签的属性为name的值定位标签数组
 6 
 7 //间接获取标签
 8 var tmp = document.getElementById('inner1');
 9 tmp.children   //获取标签下的全部子元素，返回一个列表
10 tmp.children[1]  //获取第二个子标签
11 tmp.firstElementChild  //获取第一个子标签
12 tmp.parentElement  //获取父节点标签
13 tmp.nextElementSibling  //获取下一个兄弟标签
14 tmp.previousElementSibling  //获取上一个兄弟标签
15 
16 //例子
17 tmp.parentElement.nextElementSibling.children[4].children[1]

 四、操做标签

1 //操做select元素
2 var tmp = document.getElementById('s1');  //根据标签获取元素
3 tmp.value   //获取selected的值
4 tmp.value='shanghai'   //修改select选项
5 tmp.selectedIndex=1  //修改select下标

 innerText 与 innerHTML：

1 innerText 与 innerHTML 
2 var tmp = document.getElementById('inner1');  //根据ID获取元素
3 tmp.innerText   //获取标签中的文本内容
4 tmp.innerHTML  //获取标签中的全部内容，包含html代码
5 tmp.innerText = '测试'  //更改便签内的文本内容，若是赋值的内容包含标签的字符串，依旧会以字符串的形式存储
6 tmp.innerHTML='"<a href='http://www.baidu.com'>测试一下</a>"' 
7   //若是赋值的内容包含标签的字符串，它会直接转换成标签元素

 五、操做样式

1 tmp.className    //获取class
2 tmp.className='tmp1'    //修改class的值
3 tmp.classList   //获取样式数组
4 tmp.classList.add('aaa'); //添加样式 数组
5 tmp.classList.remove('aaa'); //删除样式
6 
7 操做单独样式
8 style.xxx //操做样式的粒度更加细化，操做单个样式属性，至关于在标签中增长一个style属性
9 style.backgroundColor // 例:在css中样式能够经过【-】进行链接，在JavaScript中，全部的【-】都被去掉，【-】后面的第一个字符大写

 六、操做属性

1 var input = document.getElementById('r1')
2 input.attributes   //获取标签下的全部属性
3 input.setAttribute('class','c1')   //setAttribute(key,value): 设置属性，在标签中添加属性或自定义属性
4 input.removeAttribute('class')  //removeAttribute(key): 删除属性，在标签中删除指定属性

七、建立标签

1 //经过建立对象的形式建立标签
2 var input = document.createElement('input')  //createElement(tagName): 经过DOM建立一个标签对象
3 input.setAttribute('type','text')   //添加属性
4 input.setAttribute('value','这是经过建立对象的形式新增的标签')   //添加属性
5 document.getElementById('create').appendChild(input)  //appendChild(tagObj): 在父级标签内添加一个子标签对象

 1 //经过字符串形式建立标签
 2 var input = '<input type="text" value="这是经过字符串的形式建立的标签">'
 3 var div = document.getElementById('create');
 4 div.insertAdjacentHTML('afterBegin',input);
 5 
 6 //insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
 7 //beforeBegin: 插入到获取到标签的前面
 8 //afterBegin: 插入到获取到标签的子标签的前面
 9 //beforeEnd: 插入到获取到标签的子标签的后面
10 //afterEnd: 插入到获取到标签的后面