1 DOM
1.1 查找标签
(1)直接查找
document.getElementById(“idname”) // dom对象
document.getElementsByTagName(“tagname”) // dom对象集合 标签对象集合
document.getElementsByClassName(“name”) // dom对象集合 标签对象集合
(2)导航查找
通过某一个标签定位到另一个标签
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
1.2 操作标签
(1)文本操作
取值操作
Dom对象.innerText
Dom对象.innerHTML
赋值操作:
Dom对象.innerText="hello world"
Dom对象.innerHTML="hello world"
(2)属性操作
console.log(Dom对象.属性);
Dom对象.属性=值
console.log(dom对象.getAttribute("属性名"))
dom对象.setAttribute("属性名","值")
value: input,select,textarea
(3)class属性操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
(4)css样式设置
Dom对象.style.样式属性=样式值
2 节点操作
2.1 创建节点
document.createElement("a") var ele_a = document.createElement("a"); ele_a.href = "http://www.baidu.com"; ele_a.innerHTML = "百度"; console.log(ele_a);
2.2 添加节点
父节点.appendChild(添加节点)
2.3 删除节点
父节点.removeChild(子节点)
2.4 替换节点
父节点.replaceChild(新节点,被替换节点)
3 事件
3.1 概览
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
3.2 onload事件
onload 属性,只给body元素加。
这个属性的触发,标志着页面内容被加载完成。
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性。
3.3 onsubmit
当表单在提交时触发
该属性也只能给form元素使用
应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
3.4 事件传播
<div class="outer"> <div class="inner"></div> </div> <script> var outer = document.getElementsByClassName("outer")[0]; var inner = document.getElementsByClassName("inner")[0]; outer.onclick=function (e) { alert("out"); } inner.onclick=function (e) { alert("inner"); // 阻止事件传播 e.stopPropagation(); } </script>
3.5 阻止默认事件
<form action="" id="form"> <p>用户名<input type="text" name="user" /></p> <p><input type="submit"/></p> </form> <script> var ele_form = document.getElementById("form"); ele_form.onclick = function (e) { var inp = document.getElementsByName("user")[0]; var user = inp.value; if( user.length > 10 || user.length < 5 ){ // 阻止默认事件发生 // 方式1 // return false; // 方式2 e.preventDefault(); } }; </script>
3.6 onkeydown
Event 对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode.
<input type="text" id="inp" /> <script> var ele = document.getElementById("inp"); ele.onkeydown = function (e) { e = e || window.event; var keynum = e.keyCode; var keychar = String.fromCharCode(keynum); console.log(keynum + "======>" + keychar); } </script>