标签：har css 元素 加载完成 length 对象 技术 gif box
创建节点：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 属性开发中 只给 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>
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>
标签：har css 元素 加载完成 length 对象 技术 gif box
原文地址：https://www.cnblogs.com/lovepy3/p/9574548.html
