1.dom节点、方法
ele=document.getElementsByName('div')
ele.firstElementChild查找第一个子节点
ele.lastElementChild查找最后一个子节点
ele.nextElementSibling查找下面紧挨着的第一个兄弟节点
ele.previousElementSibling查找上面的兄弟节点
2.查找标签
ele=document.getElementsByName()通过标签名查找 ele=document.getElementsByTagName()通过标签类型查找 ele=document.getElementsByClassName()通过类名查找 ele=document.getElementById()通过标签id查找
3. onsubmit
<form action id="form1"> <input type="submit" value="hello"> </form> <script> ele=document.getElementById('form1'); ele.onsubmit=function (event) { alert('onsubmit') } onsubmit会在点击sumbit的时候先执行,可以在前端对用户输入的信息进行检查,如果可以则返回true,当返回false的时候submit不执行
4.事件传播
<div class="outer" onclick="outer()"> <div class="inner" onclick="inner()"></div> </div> <script> var outer1=document.getElementsByClassName('outer'); var inner1=document.getElementsByClassName('inner'); function outer() { alert('outer') } function inner() { alert('inner') } 对于这种情况,当点击内部的标签时,会同时出发内部和外部的标签,所以需要阻止传播
阻止传播
ele.onclick=function (e) { alert('inner') e.stopPropagation() } 其中的e可以拿到这次时间的所有信息,然后通过stopprogation来阻止事件传播
5. dom节点的增删改查
增加
<div ></div> <script> ele=document.createElement('p'); ele.innerHTML='hello'; ele_div=document.getElementsByTagName('div')[0]; ele_div.appendChild(ele)
删除
var ele=document.getElementsByClassName('div1')[0]; var ele1=document.getElementsByClassName('p1')[0]; ele.removeChild(ele1)
更改
var ele=document.getElementsByClassName('div1')[0]; var ele1=document.getElementsByClassName('p1')[1]; var ele2=document.getElementsByClassName('p1')[0]; ele.replaceChild(ele1,ele2)
6.修改标签的样式
添加
var ele=document.getElementsByClassName('div1')[0]; // ele.innerHTML='hello'; ele.innerHTML='<p>hello</p>'可以识别格式
innertext无法识别格式,把所有内容当做字符串来处理
改变css样式
var ele=document.getElementsByClassName('div1')[0]; ele.style.color='red'
改变字体大小
var ele=document.getElementsByClassName('div1')[0]; ele.style.fontsize=17
改变属性
var ele=document.getElementsByClassName('div1')[0]; ele.setAttribute('name','yehaibin')设置一个新的属性
ele.getAttribute('name')得到属性对应的值
7.class操作
var ele=document.getElementsByClassName('div1')[0]; ele.classList.add('yehaibin')将ele元素加入到一个类中