JavaScript中的Node对象和事件

た入场券 2022-06-02 01:16 233阅读 0赞

**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 23  
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" οnmοusemοve="run()" οnmοuseοut="run2()" />  
<br />  
<input type="text" id="nameId2" οnkeyup="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>