DOM
DOM：document object modue 文档对象模型
页面右键检查，在console栏输入document，就能拿到页面的dom，通过这个，可以定位页面的元素
一、获取标签
1，直接获取标签：
document.getElementById('i1') 获取id为i1的标签，因为id是唯一的，所以是精确定位，id定位用的最多
document.getElementsByTagName('div') 根据标签名称获得标签数组，因为同标签名很多，所以返回结果是一个数组
document.getElementsByClassName('c1') 根据class属性获取标签数组，class属性不是唯一的，所以返回结果也是一个数组
document.getElementsByName('hh') 根据name属性获取标签数组，name属性可以重复，所以也是一个数组
2，获取上下级关系标签：
var tmp=document.getElementById('i1') 获取到id为i1的标签,赋值给tmp
tmp.parentElement 父节点标签元素
tmp.children 所有子标签,返回结果是一个数组
tmp.firstElementChild 第一个子标签元素
tmp.lastElementChild 最后一个子标签元素
tmp.nextElementSibling 下一个兄弟标签元素
tmp.previousElementSibling 上一个兄弟标签元素
二、操作获取到的标签
1，获取其他无id的标签，并输入文本
1.通过id获取文本框元素，并输入文本
document.getElementById('inner1').children[1].value='输入的文本'
2.根据已知的ID标签，通过兄弟标签，获取其他无id的文本框元素
document.getElementById('inner1').parentElement.nextElementSibling.children[2].children[1].value='输入的文本'
2，innerText innerHTML操作
var demo=document.getElementById('inner1') #用var定义一个变量demo
demo.innerText 获取标签中的文本内容
demo.innerText='<input>' #更改标签内的文本内容，如果修改的字符串有标签的格式，也不会把标签展示到页面中；此处修改为文本<input>
demo.innerHTML 获取标签中的所有html代码
demo.innerHTML='<input>' #修改的内容如果有标签的格式，则直接会展示到页面；此处展示个文本框
3，select操作
var demo=document.getElementById('s1') #获取一个select标签
1.demo.value='shenzhen' #通过value修改：一定要是option属性中对应的value值
2.demo.selectedIndex=1 #通过脚标位置修改，脚标和option对应
4，操作标签的css样式
css存在于1.标签中 2.head标签中link 3.head中style
var demo=document.getElementById('s1')
demo.className #获取当前标签的class样式名字
demo.className='inner tmp1' #更改当前标签的class属性,更改为inner和tmp1两种样式，通过空格间隔css选择器
demo.classList #获取当前标签的class样式，是一个列表
demo.classList.remove('tmp1') #删除当前标签的tmp1 class样式
demo.classList.add('tmp2') #给当前标签增加tmp2的class样式
demo.style.backgroudColor='pink' #更改当前标签样式的背景色
demo.style.width='100px' #更改当前标签样式的宽
5，操作属性：
demo.removeAttribute(key) #删除指定的属性，括号里填的是key
demo.setAttribute(key, value) #增加一个属性
demo.attributes #获取当前标签的所有属性
6，createElement创建标签：
下面用createElement创建标签，并用appendChild把它放在父级标签内
var demo=document.createElement('input') #定义一个变量，创建一个input标签
demo.setAttribute('type','text')
demo.setAttribute('value','abc') #给input标签增加type属性和value属性
var div=document.getElementById('create') #找到一个id为create的div标签，变量名是div
div.appendChild(demo) #appendChild是在父级标签内增加子标签；这里是在父级div标签里加入demo子标签
7，字符串创建标签：
var str='<input type="text" value="123123">' #创建一个字符串标签
var div=document.getElementById('create') #找到一个div标签
div.insertAdjacentHTML('beforeEnd',str) #把str插入到div标签内的最后面（即div标签内所有子标签的后面）
beforeBegin: 插入到获取到标签的前面
afterBegin: 插入到获取到的标签内的最前面
beforeEnd: 插入到获取到的标签内的最后面
afterEnd: 插入到获取到的标签的后面
8，删除标签：
1.可以用innerHTML直接更改标签
2.div.removeChild(child) #括号里填定义的标签变量名
div.removeChild(div.lastElementChild) #删除div标签里的最后一个子标签
9，获取当前的url，或者刷新页面
location.href #获取当前的url
location.href=location.href #刷新页面
location.href='http://www.indsx.cn' //重定向
location.reload #刷新页面
10，其他操作
console.log(msg) //打印数据
alert() //弹框提示
confirm() //确认弹框，返回true 或false
