一、节点操作
创建节点：var ele_a = document.createElement(‘a‘);
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>节点操作</title> ???<style> ???????.c1 { ???????????width: 300px; ???????????height: 200px; ???????????border: 1px solid red; ???????} ???</style></head><body><div class="c1"> ???<p id="p1">年后</p> ???<p id="p2">hello</p></div><button class="addBtn">ADD</button><button class="delBtn">DEL</button><button class="replaceBtn">Replace</button><ul> ???<li>创建节点：var ele_a = document.createElement(‘a‘);</li> ???<li>添加节点：ele_parent.appendChild(ele_img);</li> ???<li>删除节点：ele_parent.removeChild(ele_p);</li> ???<li>替换节点：ele_parent.replaceChild(新标签,旧标签);</li></ul><table border="1"> ???<tbody id="t1"> ???????<tr> ???????????<td><input type="checkbox"></td> ???????????<td><input type="text"></td> ???????????<td><button class="delbtn">del1</button></td> ???????</tr> ???????<tr> ???????????<td><input type="checkbox"></td> ???????????<td><input type="text"></td> ???????????<td><button class="delbtn">del2</button></td> ???????</tr> ???????<tr> ???????????<td><input type="checkbox"></td> ???????????<td><input type="text"></td> ???????????<td><button class="delbtn">del3</button></td> ???????</tr> ???????<tr> ???????????<td><input type="checkbox"></td> ???????????<td><input type="text"></td> ???????????<td><button class="delbtn">del4</button></td> ???????</tr> ???</tbody></table><script> ???var ele_add = document.getElementsByClassName(‘addBtn‘)[0]; ???var ele_del = document.getElementsByClassName(‘delBtn‘)[0]; ???var ele_repleace = document.getElementsByClassName(‘replaceBtn‘)[0]; ???console.log(ele_add); ???//绑定的添加节点的事件 ???ele_add.onclick = function () { ???????//先创建一个标签 ???????var ele_a = document.createElement(‘a‘); ???????console.log(ele_a); //<a></a> ???????ele_a.innerHTML = ‘点击‘; //<a>点击</a> ???????ele_a.href = ‘http://www.baidu.com‘; //<a href=‘http://www.baidu.com‘>点击</a> ???????//先创建一个标签 ???????var ele_img = document.createElement(‘img‘); ???????ele_img.src = ‘1.png‘; ???????ele_img.width = 50; ???????ele_img.height = 50; ???????//找到父标签 ???????var ele_parent = document.getElementsByClassName(‘c1‘)[0]; ???????//然后添加 ???????ele_parent.appendChild(ele_a); ???????ele_parent.appendChild(ele_img); ???}; ???//绑定的删除节点的事件 ???ele_del.onclick = function () { ???????//先获取要删除的元素 ???????var ele_p = document.getElementById(‘p1‘); ???????//获取它的父元素 ???????var ele_parent = document.getElementsByClassName(‘c1‘)[0]; ???????//然后删除（注意是父元素删除子元素） ???????ele_parent.removeChild(ele_p) ???}; ???//绑定的替换节点的事件 ???ele_repleace.onclick = function () { ???????//找被替换的标签（旧标签） ???????var ele_p = document.getElementById(‘p2‘); ???????//创建一个替换后的标签（新标签） ???????var ele_img = document.createElement(‘img‘); ???????ele_img.src = ‘2.png‘; ???????ele_img.width = 100; ???????ele_img.height = 50; ???????//找到父节点 ???????var ele_parent = document.getElementsByClassName(‘c1‘)[0]; ???????//做替换（父节点替换子节点中的某一个节点）：相当于一次删除加一次添加 ???????ele_parent.replaceChild(ele_img, ele_p); ???}</script><script> ???//绑定删除节点的事件 ???var ele_dels = document.getElementsByClassName(‘delbtn‘); ???for(var i=0;i<ele_dels.length;i++){ ???????ele_dels[i].onclick = function () { ???????????//获取删除的元素 ???????????var ele_tr = this.parentElement.parentElement;// ???????????console.log(ele_tr) ???????????//找到父节点 ???????????var ele_tbody_parent =document.getElementById(‘t1‘); ???????????//然后删除 ???????????ele_tbody_parent.removeChild(ele_tr) ???????} ???}</script></body></html>具体的节点操作实例二、onload事件
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
什么时候加载完什么时候触发（如果你想把script放在body上面去，就用到onload事件了）
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????#box{ ???????????????width: 300px; ???????????????height: 300px; ???????????????background-color: green; ???????????????margin: 0 auto; ???????????} ???????</style> ???????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????var box1 = document.getElementById("box"); ???????????????box1.style.width = 200 + "px"; ???????????????box1.style.height = 200 + "px"; ???????????????box1.style.marginTop = 50 + "px"; ???????????} ???????</script> ???????????</head> ???<body> ???????<div onclick="click1(this)" id="box" > ???????????<p id="bode">我有一头小毛驴,我从来也不骑,有一天我心血来潮骑着去赶集.....</p> ???????</div> ???</body></html>三、onkeydown事件
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>event事件</title> ???</head> ???<body> ???????<input type="text" name="" id="t1" value="" /> ???</body> ???<script type="text/javascript"> ???????var keyStat = document.getElementById("t1"); ???????keyStat.onkeydown = function(event){ ???????????var num = event.keyCode; ???????????console.log(event); ???????????console.log(event.keyCode); ???????????console.log(String.fromCharCode(num)) ???????????????????????if (event.keyCode == 13) { ???????????????alert("你按下了回车键!") ???????????????????????????} else{ ???????????????????????????} ???????} ???</script></html>js05-DOM对象二
原文地址：https://www.cnblogs.com/lovepy3/p/9574548.html