DOM查询例子
程序员文章站
2022-07-02 14:56:24
dom查询完整例子加代码css部分@CHARSET "UTF-8";body { width: 800px; margin-left: auto; margin-right: auto;}button { width: 300px; margin-bottom: 10px;}#btnList { float:left;}#total{ width: 450px; float:left;}ul{ list-style-typ...
dom查询完整例子加代码
css部分
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
html和js部分
<!DOCTYPE>
<html>
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="style/css.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
/**
* 在写第七个重复性的代码时，卧槽是真的累，难道像我这样底层程序员只能写重复代码？
* 抽象抽象，这样才有类才能去找对象。
* 既然是重复性的代码，我们何不抽取出来成为另外一个函数来简化操作呢
*/
function simplify(idstr, fun) {
//绑定单击响应函数对象的id属性 传入这个需要绑定的参数
var btn = document.getElementById(idstr);
//绑定每个按钮的触发函数，这个是不同的不能写死，那就传入一个函数吧
//回调函数这就是了，我先占个位置，放个函数在这，用的时候去修改这个函数
btn.onclick = fun;
}
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
function fun() {
//查找#bj节点,得到的是一个对象
var bj = document.getElementById("bj");
//打印bj
alert(bj.innerHTML);
}
btn01.onclick = fun;
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
//查找所有的li节点
/**
* getElementsByTagName（）方法可以根据标签名获取一组元素节点对象
* 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，不是数组。
* 即使是一个也会封装在数组中返回。
*/
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
//依次打印出所有li标签里的内容
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
/**
*查找name=gender的所有节点
* getElementsByName（）方法可以根据Name属性获取一组元素节点对象
* 返回的也是类数组 NodeList
*/
var gen = document.getElementsByName("gender");
for (var i = 0; i < gen.length; i++) {
/**
* innerHTML用于获取元素内部HTML代码（两个标签之间夹的文字）
* 如果需要读取元素节点属性值
*/
alert(gen[i].value);
}
};
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
// 获取id为city的元素
var city = document.getElementById("city");
/**
* 获取#city下所有li节点，不能直接使用document.getElementsByTagName
* 那样获取的是全局的li标签，
* 先获取某元素节点，在在该节点下的后代节点中寻找li标签
*/
var lis = city.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
};
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
//获取id为city的节点
var city = document.getElementById("city");
/**
*childNodes–属性，表示当前节点的所有子节点,包括文本节点在内的所有节点
* DOM标签之间的空格也会当成一个文本节点
* 下边ul和li之间，li和li之间的五个间隔也会当成文本节点保存在集合中
* 返回的是集合，包括每一个节点元素的类数组
* <ul id="city">
* <li id="bj">北京</li>
* <li>上海</li>
* <li>东京</li>
* <li>首尔</li>
* </ul>
* 注意：在ie8及以下不会将空白当做子节点
*/
//返回#city的所有子节点
var cns = city.children;
alert(cns.length);
for (var i = 0; i < cns.length; i++) {
console.log(cns[i]);
}
};
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
var phone = document.getElementById("phone");
/**
* 下边html标签如果不想连着写就用childNodes属性获取所有节点
* 使用数组下标形式调用
* 或者直接使用chidren属性，采用下标形式调用。
*/
//返回#phone的第一个子节点
var firchd2 = phone.firstElementChild;
alert(firchd2.innerHTML);
// var firChd = phone.children;
// alert(firChd[0].innerHTML);
};
//返回#bj的父节点
simplify("btn07", function () {
var bj = document.getElementById("bj");
//返回#bj的父节点
var bjp = bj.parentNode;
//alert(bjp.innerHTML);
/***
* innerText
* -该属性可以获得元素内部的文本属性
* -他和innerHTML区别，会自动将html标签去掉。
*/
alert(bjp.innerText);
});
//返回#android的前一个兄弟节点
simplify("btn08", function () {
var use = document.getElementById("android");
//var pvsb = use.previousSibling;
var pvsb2 = use.previousElementSibling
alert(pvsb2.innerHTML);
});
//读取#username的value属性值
simplify("btn09",function () {
var use = document.getElementById("username");
var usevue = use.value;
//文本框的value值就是文本框中填写的内容
alert(usevue);
});
//设置#username的value属性值
simplify("btn10",function () {
var use = document.getElementById("username");
use.value = "人和人的沟通，有时也没没有用";
var usevue = use.value;
//文本框的value值就是文本框中填写的内容
alert(usevue);
});
//返回#bj的文本值
simplify("btn11",function () {
var bj = document.getElementById("bj");
//alert(bj.innerHTML);
//alert(bj.innerText);
//北京文本节点是id为bj元素的子节点，可以使用lastChild来获取
var last = bj.lastChild;
/**
* 注意文本节点内容不能在使用innerHTML，
* 文本节点的nodeValue就是文本内容
* 属性节点的nodeValue就是属性值
* 可以直接写为bj.lastChid.nodeValue
*
*/
alert(last.nodeValue);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>*飞车</li>
<li>魔兽</li>
</ul>
<br/>
<br/>
<p>
你手机的操作系统是?
</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
<div class="inner">
gender:
<input class="hello" name="gender" type="radio" value="male"/>
Male
<input class="hello" name="gender" type="radio" value="female"/>
Female
<br>
<br>
name:
<input id="username" name="name" type="text" value="abcde"/>
</div>
</div>
<div id="btnList">
<div>
<button id="btn01">查找#bj节点</button>
</div>
<div>
<button id="btn02">查找所有li节点</button>
</div>
<div>
<button id="btn03">查找name=gender的所有节点</button>
</div>
<div>
<button id="btn04">查找#city下所有li节点</button>
</div>
<div>
<button id="btn05">返回#city的所有子节点</button>
</div>
<div>
<button id="btn06">返回#phone的第一个子节点</button>
</div>
<div>
<button id="btn07">返回#bj的父节点</button>
</div>
<div>
<button id="btn08">返回#android的前一个兄弟节点</button>
</div>
<div>
<button id="btn09">返回#username的value属性值</button>
</div>
<div>
<button id="btn10">设置#username的value属性值</button>
</div>
<div>
<button id="btn11">返回#bj的文本值</button>
</div>
</div>
</body>
</html>
fun()和fun的区别
fun是一个定义函数，函数是function引用类型的实例，就是一个对象，是对象就会被保存在内存中，引用类型会被保存在堆内存，（直接赋值字面量会被保存在栈内存），函数名就是指向这个对象的指针。
function fun() {
return 0;
}
var a= fun;
var b= fun();
var c= (function (){
return 0;
})();
var d= function (){
return 0;
};
a变量得到的是将fun指针的拷贝，用于传参，不会执行函数，让a知道了fun函数位置，需要的时候再用，和d得到的差不多，就是回调函数。
b变量得到的是函数执行结果，只要函数名后加了括号，就会调用该函数。c和b的到的一样，c是匿名自调用函数，一旦定义立即执行，只执行一次。
本文地址：https://blog.csdn.net/LIUCHUANQI12345/article/details/109262850
上一篇： 小吃店里有哪些特色小吃？
下一篇： MybatisPlus 自动填充的实现