javaScript中的DOM补充
一、DOM树
二、DOM节点
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
其中，document与element节点是重点。
三、节点查找
（1）直接查找节点
|
1
2
3
4
|
document.getElementById(“idname”)document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”) |
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
</script>
（2）、导航节点属性
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
注意，js中没有办法找到所有的兄弟标签！
四、节点操作
（1）、创建节点
1.createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input")
tag.setAttribute('type','text');
（2）、添加节点
2.somenode.appendChild(newnode) ：追加节点（作最后的子节点）
（3）、删除节点
3.removeChild()：获得要删除的元素，通过父元素调用删除
（4）. 替换节点
4. somenode.replaceChild(newnode, 某个节点);
五、节点属性操作
1、获取文本节点的值：innerText innerHTML
2、attribute操作
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”);
3.value获取当前选中的value的值
1.input
2.select （selectedIndex）
3.textarea
4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作：
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6、改变css样式：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
六、事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
七、绑定事件
方式一：
<div id="div" onclick="foo(this)">点我呀</div>
<script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
方式二：
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="submit">
<p>姓名<input type="text" name="user" id="user"></p>
<p>年龄<input type="text" name="age" id="age"></p>
<input type="submit" >
</form>
<input type="text" id="test">
<script>
var ele_form=document.getElementById("submit");
var ele_user=document.getElementById("user");
var ele_age=document.getElementById("age");
ele_form.onsubmit=function (event) {
var username=ele_user.value;
var age=ele_age.value;
alert(username);
alert(age);
// 两种阻止默认事件发生的方式
// 方式1
return false
// 方式2
// event.preventDefault()
}
</script>
<script>
var ele=document.getElementById("test")
ele.onkeydown=function (e) {
console.log(e.keyCode);
if (e.keyCode==13){
alert(666)
}
}
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
background-color: wheat;
}
.c2{
width: 100px;
height: 100px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
<script>
var ele1=document.getElementsByClassName("c1")[0];
var ele2=document.getElementsByClassName("c2")[0];
ele1.onclick=function () {
alert(123)
};
ele2.onclick=function (event) {
alert(456);
event.stopPropagation() // 阻止事件传播
}
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
width: 100%;
height: 2000px;
border: 1px solid red;
}
.shade{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgray;
opacity: 0.5;
}
.model{
position: fixed;
top: 100px;
left:40%;
width: 300px;
height: 200px;
background-color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="back">
<button id="add">add</button>
</div>
<div class="shade hide"></div>
<div class="model hide">
<form action="">
<p>姓名<input type="text"></p>
<p>年龄<input type="text"></p>
<input type="button" id="btn" value="提交">
</form>
</div>
<script>
var ele_add=document.getElementById("add");
var ele_mdoel=document.getElementsByClassName("model")[0];
var ele_shade=document.getElementsByClassName("shade")[0];
ele_add.onclick=function () {
ele_mdoel.classList.remove("hide");
ele_shade.classList.remove("hide")
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
height: 300px;
border: 1px solid red;
}
</style>
<script>
window.onload=function () {
var ele=document.getElementsByClassName("addBtn")[0];
var ele_del=document.getElementsByClassName("delBtn")[0];
var eleBtn=document.getElementsByClassName("repalceBtn")[0];
// 绑定的添加节点事件
ele.onclick=function () {
// 创建一个a标签
var ele_a=document.createElement("a");
console.log(ele_a); // <a></a>
ele_a.innerHTML="点击"; // <a>点击</a>
ele_a.setAttribute("href","http://www.baidu.com");
ele_a.id="d1";
// 创建img标签
var ele_img=document.createElement("img"); // <img>
ele_img.src="Bootstrap_i2.png"; // <img src="">
ele_img.height=50;
ele_img.width=50;
// 添加标签
// 找到父标签
ele_p=document.getElementsByClassName("c1")[0];
// ele_p.appendChild(ele_a)
ele_p.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);
};
// 绑定替换节点事件
eleBtn.onclick=function () {
//创建的 新节点
var ele_img=document.createElement("img"); // <img>
ele_img.src="Bootstrap_i2.png"; // <img src="">
ele_img.height=50;
ele_img.width=50;
// 被替换的节点
var ele_p=document.getElementById("p1");
// 父节点
var ele_parent=document.getElementsByClassName("c1")[0]
// 做替换
ele_parent.replaceChild(ele_img,ele_p)
}
// 表格操作
var eles=document.getElementsByClassName("del") ;
for(var i=0;i<eles.length;i++){
eles[i].onclick=function () {
// console.log(this.parentElement.parentElement);
var ele_tr=this.parentElement.parentElement;
var ele_tbody=document.getElementById("t1");
ele_tbody.removeChild(ele_tr);
console.log(ele_tbody)
}
}
};
</script>
</head>
<body>
<div class="c1">
<p id="p1">p1</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">del</button>
<button class="repalceBtn">repalceBtn</button>
<hr>
<table border="1" >
<tbody id="t1">
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del1</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del2</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del3</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del3</button></td>
</tr>
</tbody>
</table>
<div>
<div>
<div></div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="username" id="search">
<script>
var ele=document.getElementById("search")
ele.onfocus=function () {
this.value=""
};
ele.onblur=function () {
if(this.value.trim()==""){
this.value="username"
}
}
</script>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>Add</button>
<script>
var eles_li=document.getElementsByTagName("li");
var ele_btn=document.getElementsByTagName("button")[0];
var ele_ul=document.getElementsByTagName("ul")[0];
// 添加li
ele_btn.onclick=function () {
var ele_li=document.createElement("li");
ele_li.innerHTML=444;
ele_ul.appendChild(ele_li)
};
// 绑定事件
for(var i=0;i<eles_li.length;i++){
eles_li[i].onclick=function () {
alert(this.innerHTML)
}
}
// 事件委派
// ele_ul.addEventListener("click",function (e) {
// console.log(e.target); // 标签
// console.log(e.target.tagName); // 标签名称
//
// if(e.target.tagName=="LI"){
// console.log("OK")
// }
// })
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var s=12;
function f(){
console.log(s); // undefined
var s=12; // 12
console.log(s) // 12
}
f();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="selectAll">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="1">
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<script>
var ele_selectAll=document.getElementsByClassName("selectAll")[0];
var ele_reverse=document.getElementsByClassName("reverse")[0];
var ele_cancel=document.getElementsByClassName("cancel")[0];
var ele_input=document.getElementsByClassName("check");
ele_selectAll.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked="checked"
}
};
ele_cancel.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked=""
}
};
ele_reverse.onclick=function () {
for(var i=0;i<ele_input.length;i++){
var ele=ele_input[i];
if(ele.checked){
ele.checked=""
}
else {
ele.checked="checked"
}
}
};
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="c1">
<select name="pro" id="s1">
<option value="1">河北省</option>
<option value="2">河南省</option>
<option value="3">北京省</option>
</select>
<button>show</button>
<script>
var ele_button=document.getElementsByTagName("button")[0];
ele_button.onclick=function () {
var ele_input=document.getElementById("c1");
var ele_select=document.getElementById("s1");
console.log(ele_select.value)
};
</script>
</body>
</html>
浙公网安备 33010602011771号