Dom:
1 找到标签
直接找
document.getElementById('id_name') #根据ID获取单个元素
document.getElementsByTagName('div') #根据tagname获取多个元素
document.getElementsByClassName('class_name') #根据Classname获取多个元素
document.getElementsByName #根据name获取多个元素
间接找
tag = document.getElementById('id_name')
parentNode # 父节点
childNodes # 所有子节点
firstChild # 第一个子节点
lastChild # 最后一个子节点
nextSibling # 下一个兄弟节点
previousSibling # 上一个兄弟节点
parentElement # 父节点标签元素
children # 所有子标签
firstElementChild # 第一个子标签元素
lastElementChild # 最后一个子标签元素
nextElementtSibling # 下一个兄弟标签元素
previousElementSibling # 上一个兄弟标签元素
2 操作标签
文件内容
tag.innerText: #获取标签里的文本全部内容,会过滤掉html标签
tag.innerHTML: #获取标签里的全部内容
tag.value: #对于input系列生效
tag.className: #class的name
tag.classList: #class的name的list
remove: #删除指定样式
add: #添加指定样式
checkbox:
checked
3 样式操作
<div class="c1 c2" style='font-size:16px;'></div>
obj.style.fontSize='16px';
4 属性操作
obj.setAttribute('xxx', 'hinimix'); #设置属性
obj.removeAttribute('xxx') #移除属性
obj.getAttribute('xxx') #单个属性
obj.attributes #所有属性
5 创建标签
1: 2b function
tag = "<input type='text'/>"
document.getElementById("show").insertAdjacentHTML("beforeEnd", tag);
插入位置
beforeBegin
afterBegin
beforeEnd
afterEnd
2: clever function
tag = document.createElement('input')
tag.setAttribute('type', 'text')
tag.style.fontSize = '16px'
tag.style.color = 'red'
document.getElementById("show").appendChild(tag);
6 Dom提交表单
任何标签都能提交表单
document.getElementById('a1').submit();
7 other:
console.log
alert()
confirm("infomation") #choice true/false
locaton.reload() #refresh local page
location.href #jump to dest web site
location.href = location.href ==> location.reload()
setInterval:
var obj = setInterval(function(){}, 4000}
clearInterval:
clearInterval(obj)
setTimeout()
clearTimeout()
8 事件:
onclick
onfocus
onblur
onmouseover
onmouserout