前端基础知识-DOM操作

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

1、包含了整个页面的所有功能，可以通过调用方法的形式来对页面进行操作；

2、JavaScript与Dom的区别：

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

　　JavaScript+Dom：可以有逻辑的操作页面

3、获取标签

//直接获取标签
document.getElementById('inner1');  //通过ID获取标签
document.getElementsByClassName('inner');  //通过class获取标签数组
document.getElementsByTagName('div');  //通过标签名称获取标签数组
document.getElementsByName('username');  //通过标签的属性为name的值定位标签数组

//间接获取标签
var tmp = document.getElementById('inner1');
tmp.children   //获取标签下的所有子元素，返回一个列表
tmp.children[1]  //获取第二个子标签
tmp.firstElementChild  //获取第一个子标签
tmp.parentElement  //获取父节点标签
tmp.nextElementSibling  //获取下一个兄弟标签
tmp.previousElementSibling  //获取上一个兄弟标签

//例子
tmp.parentElement.nextElementSibling.children[4].children[1]

 4、操作标签

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

 innerText 与 innerHTML：

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

 5、操作样式

tmp.className    //获取class
tmp.className='tmp1'    //修改class的值
tmp.classList   //获取样式数组
tmp.classList.add('aaa'); //添加样式 数组
tmp.classList.remove('aaa'); //删除样式

操作单独样式
style.xxx //操作样式的粒度更加细化，操作单个样式属性，相当于在标签中增加一个style属性
style.backgroundColor // 例:在css中样式可以通过【-】进行连接，在JavaScript中，所有的【-】都被去掉，【-】后面的第一个字符大写

 6、操作属性

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

7、创建标签

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

//通过字符串形式创建标签
var input = '<input type="text" value="这是通过字符串的形式创建的标签">'
var div = document.getElementById('create');
div.insertAdjacentHTML('afterBegin',input);

//insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
//beforeBegin: 插入到获取到标签的前面
//afterBegin: 插入到获取到标签的子标签的前面
//beforeEnd: 插入到获取到标签的子标签的后面
//afterEnd: 插入到获取到标签的后面