|
目录
！！！js是我在sgg的视频自学的可能自己学的不是很全，请见谅！！！
通过Id进行查找
使用getElementById()方法进行查询
通过TagName进行查找
使用getElementsByTagName()方法进行查询
通过Name进行查找
使用getElementsByName()方法进行查询
通过ClassName进行查找
使用getElementsByClassName()方法进行查询
查询某个节点的所有子节点
查询某个节点的第一个子节点
查询某个节点的父节点
查询某个节点的前一个兄弟节点
读取一个节点的value属性值
设置一个节点的value属性值
读取一个节点的文本值
获取body标签
获取html的根标签
获取页面中所有元素
获取某个class标签的数量
查询某个标签下的标签个数
HTML源码
?CSS源码
！！！js是我在sgg的视频自学的可能自己学的不是很全，请见谅！！！
通过Id进行查找
使用getElementById()方法进行查询
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
var bj = document.getElementById("bj");
//获取元素内部的html代码
alert(bj.innerHTML);
}
通过TagName进行查找
使用getElementsByTagName()方法进行查询
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
var lis = document.getElementsByTagName("li");
// alert(lis);
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
}
通过Name进行查找
使用getElementsByName()方法进行查询
var btn03 = document.getElementById("btn03");
btn03.onclick = function() {
var inputs = document.getElementsByName("gender");
for (var i = 0; i < inputs.length; i++) {
// alert(inputs[i].value);
alert(inputs[i].className);
}
}
通过ClassName进行查找
使用getElementsByClassName()方法进行查询
var inner = document.getElementsByClassName("inner");
alert(inner);
>>>
[object HTMLCollection]
查询某个节点的所有子节点
//返回#city的所有子节点
var btn05 = document.getElementById("btn05");
btn05.onclick = function() {
var cities = document.getElementById("city");
var cns = cities.children;
alert(cns.length)
}
查询某个节点的第一个子节点
//返回#phone的第一个子节点
var btn06 = document.getElementById("btn06");
btn06.onclick = function() {
var phone = document.getElementById("phone");
var fir = phone.firstChild;
alert(fir);
}
查询某个节点的父节点
由于函数基本一致，封装起来方便使用
function MyClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
//返回#bj的父节点
MyClick("btn07", function() {
var bj = document.getElementById("bj");
var pn = bj.parentNode;
// alert(pn.innerHTML);
alert(pn.innerText);
});
查询某个节点的前一个兄弟节点
//返回#android的前一个兄弟节点
MyClick("btn08", function() {
var and = document.getElementById("android");
// 前面为空格则获取空格
var ps = and.previousSibling;
//获取前一个兄弟元素
var pe = and.previousElementSibling;
alert(pe);
});
读取一个节点的value属性值
//读取#username的value属性值
MyClick("btn09", function() {
var name = document.getElementById("username");
alert(name.value);
});
设置一个节点的value属性值
//设置#username的value属性值
MyClick("btn10", function() {
var name = document.getElementById("username");
name.value = prompt();
});
读取一个节点的文本值
//返回#bj的文本值
MyClick("btn11", function() {
var bj = document.getElementById("bj");
alert(bj.innerText)
});
获取body标签
//获取body标签
var body = document.body;
console.log(body);
获取html的根标签
//获取html的根标签
var html = document.documentElement;
console.log(html);
获取页面中所有元素
//获取页面中所有元素
var all = document.all;
console.log(all.length);
for (var i = 0; i < all.length; i++) {
console.log(all[i]);
}
获取某个class标签的数量
var box = document.getElementsByClassName("box");
console.log(box.length);
查询某个标签下的标签个数
使用querySelector()方法
//查询到一个就返回
var div = document.querySelector(".box div");
console.log(div.innerHTML)
使用querySelectorAll()方法
//查询多个返回数组，即使只有一个也返回数组
var divs = document.querySelectorAll(".box");
console.log(divs.length);
HTML源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../css/select/css.css" />
<script type="text/javascript">
function MyClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function() {
//查找#bj节点
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
var bj = document.getElementById("bj");
//获取元素内部的html代码
alert(bj.innerHTML);
}
//查找所有li节点
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
var lis = document.getElementsByTagName("li");
// alert(lis);
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
}
//查找name=gender的所有节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function() {
var inputs = document.getElementsByName("gender");
for (var i = 0; i < inputs.length; i++) {
// alert(inputs[i].value);
alert(inputs[i].className);
}
}
btn03.onclick = function() {
var inputs = document.getElementsByName("gender");
for (var i = 0; i < inputs.length; i++) {
// alert(inputs[i].value);
alert(inputs[i].className);
}
}
//查找#city下所有li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function() {
var cities = document.getElementById("city");
var lis = cities.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
}
//返回#city的所有子节点
var btn05 = document.getElementById("btn05");
btn05.onclick = function() {
var cities = document.getElementById("city");
var cns = cities.children;
alert(cns.length)
}
//返回#phone的第一个子节点
var btn06 = document.getElementById("btn06");
btn06.onclick = function() {
var phone = document.getElementById("phone");
var fir = phone.firstChild;
alert(fir);
}
//返回#bj的父节点
MyClick("btn07", function() {
var bj = document.getElementById("bj");
var pn = bj.parentNode;
// alert(pn.innerHTML);
alert(pn.innerText);
});
//返回#android的前一个兄弟节点
MyClick("btn08", function() {
var and = document.getElementById("android");
// 前面为空格则获取空格
var ps = and.previousSibling;
//获取前一个兄弟元素
var pe = and.previousElementSibling;
alert(pe);
});
//读取#username的value属性值
MyClick("btn09", function() {
var name = document.getElementById("username");
alert(name.value);
});
//设置#username的value属性值
MyClick("btn10", function() {
var name = document.getElementById("username");
name.value = prompt();
});
//返回#bj的文本值
MyClick("btn11", function() {
var bj = document.getElementById("bj");
alert(bj.innerText)
});
var inner = document.getElementsByClassName("inner");
alert(inner);
}
</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" type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom</title>
<script type="text/javascript">
window.onload = function() {
//获取body标签
var body = document.body;
//获取html的根标签
var html = document.documentElement;
//获取页面中所有元素
var all = document.all;
console.log(all.length);
for (var i = 0; i < all.length; i++) {
console.log(all[i]);
}
var box = document.getElementsByClassName("box");
console.log(box.length);
//查询到一个就返回
var div = document.querySelector(".box div");
console.log(div.innerHTML)
//查询多个返回数组，即使只有一个也返回数组
var divs = document.querySelectorAll(".box");
console.log(divs.length);
}
</script>
</head>
<body>
<div class="box">
<div>box中的div</div>
</div>
<div class="box">
<div>box中的div</div>
</div>
<div class="box">
<div>box中的div</div>
</div>
</body>
</html>
?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;
}
|