DOM选择器
DOM
选择器以及内容文本操作
原理：将整个HTML看作一个大对象，对象嵌套对象
与JavaScript的关系：JavaScript定义了一个函数后，通过DOM对元素进行选取和操作。
一、查找
直接
document.getElementById('i1')
document.getElementsByName #s,获取的是多个元素[]列表，根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
间接
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二、操作
文本操作：
obj.innerText #获取该标签内文本，忽略内部标签 #不能对[]操作 obj.innerHTML #包含了内部标签和文本 obj.value #获取当前标签的值，一般针对input等 input select select标签有selectedIndex，0，1，2等 textarea obj.innerText = "<a href='http://www.baidu.com'>百度</a>"; #显示为文本 obj.innerHTML = "<a href='http://www.baidu.com'>百度</a>"; #显示为超链接
例子：输入框提示“请输入关键字”和移除
onfocus() 光标移至时触发
onblur() 光标移开时触发
现在html的input标签有了 placeholder = ‘请输入关键字’，功能类似
样式操作：
.className='c1' #创建class属性，整体操作
.classList #获取所有的class列表,首单词小写，后面所有单词大写
.classList.add('c2') #增加指定样式
.classList.remove('c2') #删除
obj.style
.fontSize = '16px' # 不同于css
.color
.backgroundColor
属性操作
obj.attributes #获取所有属性
obj.setAttribute('xxxx','alex');
obj.removeAttribute('value') #去掉value属性值
obj.src 修改链接
标签创建：
字符串形式：var tag = "<input type='text'/><hr />";
对象形式： var tag = document.createElement('input');
tag.setAttribute('type','text');
标签操作：
方式一：对应字符串形式创建标签
var tag = "<input type='text'/><hr />";
document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
方式二：对象形式创建标签
var tag = document.createElement('input');
tag.setAttribute('type','text');
document.getElementById('i1').appendChild(tag);
提交表单：
document.getElementById('').submit()
其他操作：
console
alert
confirm() 弹出确认框，返回一个布尔值，true or false
//url和刷新
location.href
location.href="" #重定向，跳转
location.reload() #页面刷新
//定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout(function(){},5000) 单次定时器，对比setInterval,它只执行一次
clearTimeout 清除单次定时器
var obj = setInterval(function(){},5000)
clearInterval(obj) 这个清除定时器还可以放置在function内
示例：模态对话框
document.getElementsByClassName('c1')[0].classList.add('hide'); #通过类找到的是列表
document.getElementById('c1').classList.remove('hide');
全选和反选示例
函数名取值时记得不要和预设的冲突了
function reverseall() {
var tb = document.getElementById('tb'); #获取总父标签
var tr = tb.children; #所有孩子
for( var i=0;i<tr.length;i++){
var checkbox = tr[i].children[0].children[0]; #第一个孩子
if(checkbox.checked){
checkbox.checked = false; #获取打钩框的值
}else{
checkbox.checked = true;
}
}
}
示例：左侧管理菜单
function changeMenu(ths) {
var item_list = ths.parentElement.parentElement.children;
for(i=0;i<item_list.length;i++){
var item = item_list[i];
item.children[1].classList.add('hide') #所有添加hide
}
ths.nextElementSibling.classList.remove('hide') #当前菜单remove hide
}
三、事件：
onclick，onblur，onfocus
行为、样式、结构 相分离的页面（js、css、html分开）：
把css写到style标签内，onclick放在script标签内，通过tag.onclick = function(){}匿名函数触发
总结：两种方式
直接标签内onclick
获取dom对象然后进行绑定
this：
直接标签内绑定函数时：script内的this代指全局变量，除非在标签内传this，
<input type="button" onclick="Click(this)" />
function Click(ths){
//ths
}
获取DOM对象时：代指当前触发事件的标签，是一个DOM对象
<input type="button" id="i1"/>
document.getElementById('i1').onclick=function(){
//this
}
例子：
var myTrs = document.getElementByTagName();
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function(){
*** myTrs[i].style.color = ''; #报错，js作用域的问题，function一开始不执行
等到鼠标点击的时候i=2已创建好，改this
}
}
绑定事件的另一种方式：
.addEventListener('click',function(){console.log('main')},false);
.addEventListener('click',function(){console.log('content')},false);
false表示冒泡，从里向外，true表示捕捉，从外向里
决定了console的执行顺序，false先content后main
词法分析：
active object AO
1.形式参数
2.局部变量
3.函数声明表达式
分析时，AO的优先性：函数表达式>形式参数>局部变量
执行时，从上到下逐句赋值执行
function t(age) {
console.log(age);
var age=27;
console.log(age);
function age() {}
console.log(age);
}
t(3)
输出：f age(){} 27 27
