JavaScript中的Node对象和事件

Node对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="nameId" name="username" value="zhangsan">

<span id="spanId">
我是span的区域
</span>

<ul id="ulId">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
</ul>

<ul>
<li>小时代1</li>
<li id="xsd2">小时代2</li>
<li>小时代3</li>
</ul>

<hr/>

<button id="btnId">
我是按钮
</button>

<span id="spanId2"></span>

</body>
<script type="text/javascript">
/*
元素属性文本
nodeName 大写的标签名称属性名称#text
nodeType 1 2 3
nodeValue null 属性的值文本的内容

parentNode 获取父节点*****
childNodes 获取所有的子节点(包括空格)
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling上一个兄弟节点

hasChildNodes()检查是否包含子节点
hasAttributes()检查是否包含属性(value)

appendChild(node)父节点调用，在末尾添加子节点
insertBefore(new old)父节点调用，在指定节点之前添加子节点
replaceChild(new,old)父节点调用，替换节点
removeChild(node)父节点调用，删除节点
cloneNode(boolean) 不是父节点调用，复制节点
复制谁，谁调用
boolean ：如果是true，赋值子节点
如果是false，不复制子节点，默认值是false
*/
var input = document.getElementById("nameId");
//alert(input.nodeName);//INPUT
//alert(input.nodeType);//1
//alert(input.nodeValue);//null

var attr = input.getAttributeNode("type");
//alert(attr.nodeName);//type
//alert(attr.nodeType);//2
//alert(attr.nodeValue);//text

var span = document.getElementById("spanId");
var text = span.firstChild;
//alert(text.nodeName);//#text
//alert(text.nodeType);//3
//alert(text.nodeValue);//我是span的区域

var ul = document.getElementById("ulId");
var li = ul.firstElementChild;
//alert(li.nodeType);//1

//是否包含子节点
//alert(ul.hasChildNodes());//true
//alert(ul.nodeValue);//null
//是否包含属性
//alert(ul.hasAttributes());//true

//获取上海子节点
var li = document.getElementById("sh");
//创建深圳子节点
var li1 = document.createElement("li")
var text = document.createTextNode("深圳");
//li1.appendChild(text);
//li.insertBefore(li1,li);

//点击上海，用小时代2替换上海
//function run(){
//alert("hehe");

//}

//点击上海，用小时代2替换上海
document.getElementById("sh").onclick = function(){
//alert("hehe");
//var sh = document.getElementById("sh");
//var xsd2 = document.getElementById("xsd2");
//var ul = sh.parentNode;
//ul.replaceChild(xsd2, sh);

var ul = this.parentNode;
var xsd2 = document.getElementById("xsd2");
ul.replaceChild(xsd2,this);
};

//删除节点(简单)
document.getElementById("gz").onclick = function(){
//this.parentNode.removeChild(this);
var ul = this.parentNode;
ul.removeChild(this);
};

//删除节点(麻烦)
document.getElementById("bj").onclick = function(){
var bj = document.getElementById("bj");
var ul = bj.parentNode;
ul.removeChild(bj);
};

//赋值button的按钮，添加到span标签的中间
var btn = document.getElementById("btnId");
var newbtn = btn.cloneNode(true);
var span = document.getElementById("spanId2");
span.appendChild(newbtn);
</script>
</html>

HTML中的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="nameId" onmousemove="run()" onmouseout="run2()" />
<br />
<input type="text" id="nameId2" onkeyup="run3()" style="width: 200px;"/>
<div id="divId" style="width: 200px; display:none">
<table>
<tr>
<td>java</td>
</tr>
<tr>
<td>js</td>
</tr>
<tr>
<td>jsp</td>
</tr>
</table>
</div>

</body>
<script type="text/javascript">
/*
鼠标移动的事件
onmousemove
onmouseout
onmouseover

鼠标点击事件(*****)
onclick 单击
ondblclick 双击

加载和卸载(*****)
onload 加载
onunload 卸载

获取焦点和失去焦点(******)
onfocus 获取焦点
onblur 市区焦点

键盘事件
onkeyup 按下输入后抬起

改变事件(******)
onchange

控制表单提交事件(******)
onsubmit 提交
*/
function run(){
var input = document.getElementById("nameId");
input.style.backgroundColor = "gray";
}
function run2(){
var input = document.getElementById("nameId");
input.style.backgroundColor = "";
}
function run3(){
var div = document.getElementById("divId");
div.style.display = "block";
}
</script>
</html>

JavaScript中的Node对象和事件

猜你喜欢