web前端_DOM操作

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

一个web页面的展示，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来。

dom操作，文档对象模型，操作页面上的任意的一个标签，如何定位标签byid,byclass,当标签没有ID和class时候 需要简介定位，
分析html 目标标签和当前标签的关系，搞清楚寻找路径，用下面的方法进行定位，定位后找到value(只要能看到就能修改),input,select
div标签定位例如：
    <div class="inner" id="inner1">
            <span>input:  </span>
            <input type="text" placeholder="div的id是inner1">
        </div>
    // 定位标签 赋值给e 找到div标签
     var e = document.getElementById('inner1') 
     innerText与innerHTML区别，
     innerText添加的是字符串
     e.innerText='<a href="http://www.baidu.com">跳转百度</a>'
     innerHTML如果传一个符合html标签规则的字符串那么可以点击跳转
     e.innerHTML='<a href="http://www.baidu.com">跳转百度</a>'

     方法：
     e.children 获取div标签的子元素[span,input]
     e.firstElementChild 获取第一个子元素
     e.lastElementChild的 获取最后一个上相邻元素 
     e.parentElement 拿div外层的标签
     e.nextElementSibling 下一个兄弟标签
     e.previousElementSibling 上一个兄弟标签

 

操作样式
e = <div class="inner " id="clst"></div>
1.首先定位标签
2.通过className修改样式 e.className='css样式'
通过classList.add('css样式')增加样式，classList.remove('css样式')删除样式
3.操作style属性 e.style.backgroundColor='black'
4.隐藏某一个元素 e.style.display='none'

操作属性
r = <input type="text" value="通过removeAttribute删除属性" id="r1">
1.removeAttribute(key): 删除属性，在标签中删除指定属性 r.removeAttribute('value')
2.setAttribute(key,value): 设置属性，在标签中添加属性或自定义属性 r.setAttribute('placeholder','请输入用户名')

创建标签
对象创建标签
1.createElement(tagName): 通过DOM创建一个标签对象 var input = document.createElement('input')
2.appendChild(tagObj): 在父级标签内添加一个子标签对象 e.appendChile(input)

字符串创建标签
var str = '<input type="text" value="1231232">'
e.insertAdjacentHTML('beforeBegin',str)
beforeBegin: 插入到获取到标签的前面
afterBegin: 插入到获取到标签的子标签的前面
beforeEnd: 插入到获取到标签的子标签的后面
afterEnd: 插入到获取到标签的后面