前端基础知识-DOM操作
DOM（Document Object Model 文档对象模型）
1、包含了整个页面的所有功能，可以通过调用方法的形式来对页面进行操作；
2、JavaScript与Dom的区别：
JavaScript是脚本语言，可以写逻辑性代码；而Dom是文档对象模型，可以直接操作页面；
JavaScript+Dom：可以有逻辑的操作页面
3、获取标签
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]
4、操作标签
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 //如果赋值的内容包含标签的字符串，它会直接转换成标签元素
5、操作样式
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中，所有的【-】都被去掉，【-】后面的第一个字符大写
6、操作属性
1 var input = document.getElementById('r1') 2 input.attributes //获取标签下的所有属性 3 input.setAttribute('class','c1') //setAttribute(key,value): 设置属性，在标签中添加属性或自定义属性 4 input.removeAttribute('class') //removeAttribute(key): 删除属性，在标签中删除指定属性
7、创建标签
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: 插入到获取到标签的后面
