作者:ACE纞_814 | 来源:互联网 | 2023-08-27 19:27
前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作。很重要!!
一、节点操作
创建节点:var ele_a = document.createElement(‘a‘);
添加节点:ele_parent.appendChild(ele_img);
删除节点:ele_parent.removeChild(ele_p);
替换节点:ele_parent.replaceChild(新标签,旧标签);
1
2
3
4
5
6
13
14
15
19 20 21 22
23 - 创建节点:var ele_a = document.createElement(‘a‘);
24 - 添加节点:ele_parent.appendChild(ele_img);
25 - 删除节点:ele_parent.removeChild(ele_p);
26 - 替换节点:ele_parent.replaceChild(新标签,旧标签);
27
28 52 99 114 115 具体的节点操作实例事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
二、onload事件
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
什么时候加载完什么时候触发(如果你想把script放在body上面去,就用到onload事件了)
1
2
3
4
5
6
13
77
78
79
83 84 85 86
87 - 创建节点:var ele_a = document.createElement(‘a‘);
88 - 添加节点:ele_parent.appendChild(ele_img);
89 - 删除节点:ele_parent.removeChild(ele_p);
90 - 替换节点:ele_parent.replaceChild(新标签,旧标签);
91
92 124 125 onload事件(基于节点操作的修改) 1
2
3
4
5
6
7
28
29
30
31
hello p
32 33 34 onload示例二三、onkeydown事件
Event 对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode.
onkeydown事件
四、onsubmit事件
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
onsubmit 五、事件传播
1
2
3
4
5
6
18
19
20
23 42 43 事件传播
六、seach实例
模拟placeholder属性的功能
placeholder和value的区别:
placeholder:只是一个提示功能,不传值。
value:是一个默认的值,如果你的输入框中不写数据的时候,它会把默认的数据发过去
seach示例