JS节点操作

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<script>
function computePrice(obj){
obj.value=obj.value.replace(/D+/,"");
//得到数量
var num=parseFloat(obj.value);
var pTdObj=obj.parentNode.previousSibling;//得到当前元素的父节点的上一个兄弟节点
var nTdObj=obj.parentNode.nextSibling;//得到元素父节点的下一个兄弟节点
if(isNaN(num)){
num=1;
}else{
nTdObj.innerHTML=num * pTdObj.innerHTML;
}
}
function del(obj){
var trObj=obj.parentNode.parentNode;
trObj.parentNode.removeChild(trObj);
}

window.onload=function(){
var likes=document.getElementsByName("like");//获取所有name属性为like的元素集合

var myspan=document.getElementById('myspan');//得到span元素对象
alert(myspan.innerHTML);

var txtNode=myspan.firstChild;//通过元素节点,firstChild,得到文本节点
alert(txtNode.nodeValue+"we");//得到文本节点内容
}


</script>

<script>
var deptObj,employeeObj;
window.onload=function(){
deptObj=document.getElementById("deptSelect");
employeeObj=document.getElementById("employeeSelect");

//弹出选择框,返回boolean值
// var value=confirm("是否删除");
// alert(value);

var value=prompt("请输入姓名");
alert(value);
}
function changeDept(){
//清空下拉框的选项,options为下拉框所有option元素集合
employeeObj.options.length=0;

if(deptObj.value==1){
//创建option元素
var newOption=document.createElement("option");
newOption.innerHTML="张三";
newOption.value=1;
employeeObj.appendChild(newOption);
}else if(deptObj.value==2){
var newOption=document.createElement("option");
newOption.innerHTML="李四";
newOption.value=2;
employeeObj.appendChild(newOption);
}
}
function showSelected(){
var schoolObj=document.getElementById('schoolSelect');
var s='';
for(var i=0;i<schoolObj.length;i++){
if(schoolObj.options[i].selected==true){//判断选项是否被选中
s+=schoolObj.options[i].value+"";
}
}
alert(s);

}
</script>
</head>
<body>
<table>
<tr><td>商品名</td><td>单价</td><td>数量</td><td>总价</td><td>操作</td></tr>
<tr><td>呆毛</td><td>1.5</td><td><input type="text" value="1" onkeyup="computePrice(this)"></td><td>1.5</td><td><a href="javascript:void(0)" onclick="del(this)">删除</a></td></tr>
<tr><td>猪儿虫</td><td>2</td><td><input type="text" value="1" onkeyup="computePrice(this)"></td><td>2</td></tr>
<tr><td>熊掌</td><td>4</td><td><input type="text" value="1" onkeyup="computePrice(this)"></td><td>4</td></tr>
</table>
<form>
爱好:<input type="checkbox" name="like" value="体育">体育
爱好:<input type="checkbox" name="like" value="音乐">音乐
爱好:<input type="checkbox" name="like" value="美术">美术
</form>
<span id="myspan">----</span>

<select id="deptSelect" onchange="changeDept()">
<option value="-1">请选择</option>
<option value="1">市场部</option>
<option value="2">财务部</option>
</select>

<select id="employeeSelect"></select>
<!--设置下拉框选项,不会触发onchange事件-->
<input type="button" value="设置" onclick="deptObj.value=2"><br>

<select multiple id="schoolSelect">
<option value="成都1中">成都1中</option>
<option value="成都2中">成都2中</option>
<option value="成都3中">成都3中</option>
<option value="成都4中">成都4中</option>
</select>
<input type="button" onclick="showSelected();"><br>
<input type="button" onclick="window.open('Table.html','mywindow','width=200px,height=200px')" value="打开新窗口">

<a href="Table.html">跳</a>
</body>
</html>

原文地址:https://www.cnblogs.com/yanjialin/p/6423070.html