|
|
@@ -0,0 +1,85 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ #div1{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ #div2{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: blue;
|
|
|
+ }
|
|
|
+ .xxx{
|
|
|
+ background: gray;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="div1">123</div>
|
|
|
+ <div id="div2">123</div>
|
|
|
+
|
|
|
+ <div class="xxx">222</div>
|
|
|
+ <div>333</div>
|
|
|
+ <div>444</div>
|
|
|
+ <div class="xxx">555</div>
|
|
|
+ <ul >
|
|
|
+ <li class="xxx">1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li class="xxx">3</li>
|
|
|
+ <li>4</li>
|
|
|
+ <li class="xxx">5</li>
|
|
|
+ <li>6</li>
|
|
|
+ </ul>
|
|
|
+ <ul id="ul2">
|
|
|
+ <li >1</li>
|
|
|
+ <li class="xxx">2</li>
|
|
|
+ <li >3</li>
|
|
|
+ <li class="xxx">4</li>
|
|
|
+ <li >5</li>
|
|
|
+ <li class="xxx">6</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <button id="btn">点击</button>
|
|
|
+ <script>
|
|
|
+ var btn = document.getElementById('btn')
|
|
|
+
|
|
|
+ var div1 = document.getElementById('div1')
|
|
|
+
|
|
|
+ var xxx = document.getElementsByClassName('xxx')//返回的是一个数组[]
|
|
|
+ var ul1 = document.getElementsByTagName('ul')//返回的是一个数组[]
|
|
|
+
|
|
|
+ var ul2 = document.getElementById('ul2')
|
|
|
+ var li1 = ul2.getElementsByClassName('xxx')
|
|
|
+ console.log(ul1)
|
|
|
+ console.log(xxx)
|
|
|
+ console.log(div1)
|
|
|
+ btn.onclick = function(){
|
|
|
+ div1.style.background = 'green'
|
|
|
+ console.log(123)
|
|
|
+ }
|
|
|
+ for(var i=0;i<xxx.length;i++) {
|
|
|
+ xxx[i].style.background = 'green'
|
|
|
+ }
|
|
|
+ for(var j=0;j<ul1.length;j++){
|
|
|
+ var lixxx = ul1[j].getElementsByClassName('xxx')//返回的是一个数组[]
|
|
|
+ console.log(lixxx)
|
|
|
+ for(var x=0;x<lixxx.length;x++){
|
|
|
+ lixxx[x].style.background = 'orange'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for(var n=0;n<li1.length;n++){
|
|
|
+ li1[n].style.background = 'purple'
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub