1, 根据ID查询节点
document.getElementById()
2, 根据层级节点结构查询
1, parentNode
作用: 根据当前节点的层级结构,返回父元素节点;
2, childNodes
作用: 根据当前节点的层级结构,返回当前元素的所有子元素数组;
注意:能够获取所有的元素节点和文本节点。换行符、空格、Tab等都会被获取为文本节点-Text;
3, children
根据当前节点的层级结构,返回当前元素的所有子元素数组;(区别childNodes,不会返回space,Tab等,只返回元素)
4, nextSibling
获取当前节点的下一个兄弟节点
5, nextElementSibling
获取当前节点的下一个元素兄弟节点
6, previousSibling
获取当前节点的上一个节点
7, previousElementSibling
获取当前节点的上一个元素兄弟节点
3, 通过标签名称获取页面元素
语法: document|elem.getElementsByTagName("标签名");
返回值: 返回包含指定标记的元素列表;
eg:
element.getElementsByTagName("p");
4, 通过元素的name属性值获取元素;
语法: document.getElementsByName("name");
返回值:包含指定name属性的元素数组
5, 通过元素的class属性值获取元素
document|elem.getElementsByClassName("clssName");
返回值:包含指定class属性的所有元素;
作业:
模拟商品购物车数量加减按钮;
1, 文本框初始值为1
2, 点击 + 按钮,允许将文本框值+1操作
3, 点击 - 按钮时,允许将文本框的值进行 -1操作;但值不能小于1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#buttonSub,#buttonAdd{
height:40px;
width:40px;
box-sizing:border-box;
border: none;
border-radius:3px;
}
#inputNum{
height:40px;
width:80px;
text-align:center;
border: 1px solid #000;
box-sizing:border-box;
font-size:24px;
vertical-align:middle;
}
</style>
</head>
<body>
<div id = "d1">
<h2 id="hTitle">月牙湾</h2>
<p>是谁的心啊</p>
<p>孤单地留下</p>
<p id = "p3">他还好吗</p>
<p>我多想爱他</p>
<p>那永恒的泪凝固成一句话</p>
</div>
<div id="d2">
<h2 id="hTitle2">翻天印</h2>
<p>一印无名</p>
<p>吾号翻天</p>
<p>天地昭昭</p>
<p>永镇乾坤</p>
</div>
请选择您的口味:
<input type="checkbox" name="eating" value="0">acid
<input type="checkbox" name="eating" value="1">sweet
<input type="checkbox" name="eating" value="2">bitter
<input type="checkbox" name="eating" value="3">spicy
<input type="checkbox" name="eating" value="4">salty
<br>
<button onclick="getParent()">获取title父元素</button>
<button onclick="getChild()">获取div的子元素数组</button>
<button onclick="getChildren()">直接获取div的子元素数组</button>
<button onclick="getNextSibling()">获取下一个兄弟节点</button>
<button onclick="getNextEleSibling()">获取下一个兄弟节点</button>
<button onclick="getPreSibling()">获取上一个兄弟节点</button>
<button onclick="getLabel()">获取文档标签</button>
<button onclick="getEleLabel()">获取元素标签</button>
<button onclick="getEleByName()">打印勾选的复选框</button>
<br>
作业
<br>
/*this表示当前元素*/
<button id = "buttonSub" onclick="btnOper(this)">-</button>
<input type="text" name="account" value="1" id="inputNum">
<button id = "buttonAdd" onclick="btnOper(this)">+</button>
<br>
<button id = "buttonSub" onclick="btnOper(this)">-</button>
<input type="text" name="account" value="1" id="inputNum">
<button id = "buttonAdd" onclick="btnOper(this)">+</button>
<br>
<button id = "buttonSub" onclick="btnOper(this)">-</button>
<input type="text" name="account" value="1" id="inputNum">
<button id = "buttonAdd" onclick="btnOper(this)">+</button>
<br>
<button id = "buttonSub" onclick="btnOper(this)">-</button>
<input type="text" name="account" value="1" id="inputNum">
<button id = "buttonAdd" onclick="btnOper(this)">+</button>
<br>
<button id = "buttonSub" onclick="btnOper(this)">-</button>
<input type="text" name="account" value="1" id="inputNum">
<button id = "buttonAdd" onclick="btnOper(this)">+</button>
<script>
function getParent(){
var ele = document.getElementById("hTitle");
var div = ele.parentNode;
console.log(div);
div.style.color = 'pink';
}
function getChild(){
var ele = document.getElementById("d1");
var child = ele.childNodes;
//child会将换行符或空格,Tab等识别为text,要打印子 元素需要加一层判断;
for (var i=0;i < child.length ; i ++)
{
if (child[i].nodeType == 1)
{
console.log(child[i]);
}
}
//console.log(child);
}
function getChildren(){
var ele = document.getElementById("d1");
var children = ele.children;
console.log(children);
for (var i = 0; i < children.length; i++)
{
console.log(children[i]);
}
}
function getNextSibling(){
var ele = document.getElementById("hTitle");
console.log(ele.nextSibling);
}
function getNextEleSibling(){
var ele = document.getElementById("hTitle");
console.log(ele.nextElementSibling);
console.log(ele.nextElementSibling.nextElementSibling);
}
function getPreSibling(){
var ele = document.getElementById("p3");
console.log('本节点:')
console.log(ele);
console.log('上一个兄弟节点是:')
console.log(ele.previousSibling);
console.log('上一个兄弟元素节点是:')
console.log(ele.previousElementSibling);
console.log('下一个兄弟节点是:')
console.log(ele.nextSibling);
console.log('下一个兄弟元素节点是:')
console.log(ele.nextElementSibling);
}
function getLabel(){
var pElement = document.getElementsByTagName("p");
for (var i = 0; i < pElement.length; i ++)
{
pElement[i].style.background = "yellow";
}
}
function getEleLabel(){
var pElement2 = document.getElementById("d2").getElementsByTagName("p");
for (var i = 0; i < pElement2.length;i ++ )
{
pElement2[i].style.color = "pink";
}
}
function getEleByName(){
//获取所有name为eating的元素
var ele = document.getElementsByName("eating");
//遍历元素
for (var i = 0; i<ele.length ; i++ )
{
//如果复选框被勾选则打印
if (ele[i].checked)
{
console.log(ele[i].value);
}
}
}
//不推荐方法
var ele = document.getElementsByName("account");
function subAccount(){
n = parseInt(ele[0].value);
if (n > 1)
{
ele[0].value = n - 1;
}else{
ele.visible = false;
}
}
function addAccount(){
n = parseInt(ele[0].value);
ele[0].value = n + 1;
}
//推荐的方法
function btnOper(btn){
//通过兄弟元素来操作
//如果是+ ,则获取上一个 元素
if (btn.innerText == '+')
{
++btn.previousElementSibling.value ;
}else{
//如果是-则获取下一个元素
var ele = btn.nextElementSibling;
var value = Number(ele.value);
if (value > 1)
{
ele.value = value - 1;
}
}
}
</script>
</body>
</html>