查询DOM元素
查询单个元素document.getElementById
<!DOCTYPE html>
<html>
<head>
<title>访问元素</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color:#fff;
background-color: #003300;
}
</style>
</head>
<body>
<ul id="ul">
<li id="a">油条</li>
<li id="b">包子</li>
<li >米饺</li>
<li id="d"><a>鱼粉</a></li>
</ul>
<script>
var el = document.getElementById('a');
el.className = 'mycolor';
</script>
</body>
</html>
按CSS查询一个 document.querySelector
<!DOCTYPE html>
<html>
<head>
<title>按CSS查询</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color: #996600;
}
.steam{
text-decoration: #996600;
}
</style>
</head>
<body>
<ul id="ul">
<li id="b" class="steam">包子</li>
<li id="c" class="steam">米饺</li>
<li id="d"><a>鱼粉</a></li>
<li id="a">油条</li>
</ul>
<script>
var el = document.querySelector('li.steam');
el.className = 'mycolor';
</script>
</body>
</html>
按元素标签查询多个 getElementsByTagName
<!DOCTYPE html>
<html>
<head>
<title>按元素标签查询多个</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color:#fff;
background-color: #999999;
}
.steam{
text-decoration: initial;
}
</style>
</head>
<body>
<ul id="ul">
<li id="a">油条</li>
<li id="b" class="steam">包子</li>
<li id="c" class="steam">米饺</li>
<li id="d"><a>鱼粉</a></li>
</ul>
<script>
var el = document.getElementsByTagName('li');
els[2].className = 'mycolor';
</script>
</body>
</html>
查询父节点parentNode
<!DOCTYPE html>
<html>
<head>
<title>查询父节点</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color:#fff;
background-color: #F8DD88;
}
.steam{
text-decoration: initial;
}
</style>
</head>
<body>
<ul id="ul">
<li id="a">油条</li>
<li id="b" class="steam">包子</li>
<li id="c" class="steam">米饺</li>
<li id="d"><a id="yufen">鱼粉</a></li>
</ul>
<script>
var el = document.getElemetById('yufen');
els[0].className = 'mycolor';
</script>
</body>
</html>
查找兄弟元素 previousSibling nextSibling
<!DOCTYPE html>
<html>
<head>
<title>查找兄弟元素</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color:#fff;
background-color: #F8DD88;
}
.steam{
color: red；
}
</style>
</head>
<body>
<ul id="ul">
<li id="ali">油条</li> <li id="bli">包子</li> <li id="cli">米饺</li> <li id="dli"><a>鱼粉</a></li>
</ul>
<script>
var tempel = document.getElemetById("bli");
tempel.className = "steam";
var previousNode = tempel.previousSibng;
previousNode.className = "mycolor";
var nextNode = tempel.nextSibling;
nextNode.className = "mycolor";
</script>
</body>
</html>
查询子节点 firstChild lastChild
<!DOCTYPE html>
<html>
<head>
<title>查找子元素</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycolor{
color:#fff;
background-color: #F8DD88;
}
.steam{
color: red；
}
</style>
</head>
<body>
<ul id="ul"
><li id="ali">油条</li
><li id="bli">包子</li
><li id="cli"><a id="yufen">米饺</a></li
><li id="dli">鱼粉</li
<!--这段代码，要写成这样才正常查询到。-->
<script> ></ul>
var tempel = document.getElementById("ul");
var firstNode = tempel.firstChild;
firstNode.className = "mycolor";
var lastNode = tempel.lastChild;
lastNode.className = "mycolor";
</script>
</body>
</html>