DOM模型演示---增删改查中的查询

最新推荐文章于 2020-03-06 17:50:34 发布

大z小z

最新推荐文章于 2020-03-06 17:50:34 发布

阅读量190

点赞数

分类专栏： jsp 文章标签： jsp dom

本文链接：https://blog.csdn.net/qq_36171618/article/details/71566170

版权

jsp 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM模型演示---增删改查中的查询</title>
<script type="text/javascript" src="../Jsp2/tools/1.js">
</script>
</head>
<body>
<pre>
查询节点类别1(level0):
1)通过getElementById()---通过标签的id属性
2)通过getElementsByName()---通过标签的name属性
3)通过getElementsByTagName()---通过标签名称
4)通过getElementsByClassName()---通过标签的class属性
</pre>
<input type="button" οnclick="demo1();" value="演示节点的查询1"><br/>
<div id="div1">
测试文本1
</div>
<script type="text/javascript">
//1)通过getElementById()---通过标签的id属性
function demo1(){
var oDivNode = document.getElementById("div1");
println(oDivNode);//[object HTMLDivElement]
}
</script>
<input type="button" value="演示节点的查询2" οnclick=" demo2();"><br/>
<input type="text" name="userName" value="请输入姓名">
<script type="text/javascript">
//2)通过getElementsByName()---通过标签的name属性---注意，返回的是一个数组
function demo2(){
var oDivName = document.getElementsByName("userName");
//读
//alert(oDivName[0].nodeName);//input
//alert(oDivName[0].value);//"请输入姓名"fd
//写
//oDivName[0].value="aaaaa";

//直接写
document.getElementsByName("userName")[0].value = "okok";//okok
}
</script>
<br/>
<input type="button" value="演示节点的查询3" οnclick=" demo3();"><br/>
<input type="text" name="pwd">
<script type="text/javascript">
//3)通过getElementsByTagName()---通过标签名---注意，返回的是一个数组
function demo3(){
var oDivtag = document.getElementsByTagName("input");
document.getElementsByTagName("input")[4].value = "aaa;"
}
</script>
<br/>
<input type="button" value="演示节点的查询4" οnclick="demo4();"> <br/>
<input type="text" name="code" class="aa">
<script type="text/javascript">
//4)通过getElementsByClassName()---通过标签的class属性---注意，返回的是一个数组
function demo4(){
document.getElementsByClassName("aa")[0].value="adc";
}
</script>
<hr>
通过普通元素(标签节点)，在它的子孙节点中进行level0查询即用
getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()等方法。<br/><br/>

网页链接：
<a href="http://www.sina.com">新浪</a>   <br/>
<a href="http://www.baidu.com">百度</a>  <br/>

商品展示:<br/>
<div id="goods">
<a href="goods/1.html">商品1</a>    
<a href="goods/2.html">商品2</a>    
<a href="goods/3.html">商品3</a>
</div>
<br>
<input type="button" value="演示节点的查询并设置用新窗口打开商品展示" οnclick=" demo5();"> <br />
<script type="text/javascript">
function demo5(){
var oDivgoods = document.getElementById("goods");
var oAs = oDivGoods.getElementsByTagName("a");//在oDivGoods节点的子孙节点中进行level0的查询
for( var i=0;i<oAs.length;i++ ){
oAs[i].target="_blank";//新开一个窗口；
}
}
</script>

</body>

</html>