JS：day02

一、DOM（文档对象模型）

1、获取元素的几种方式

①.通过 id 查找 HTML 元素（getElementById）

<script>
    var one = document.getElementById("two");
    one.onclick=function(){
        this.style.cssText="width:200px;height:200px;border: 10px solid blue;"
    }
</script>

②.通过 class 查找 HTML 元素（getElementsByClassName）：数组

<script>
    var one = document.getElementsByClassName("one")[0];
    one.onclick=function(){
        this.style.cssText="width:200px;height:200px;border: 10px solid blue;"
    }
</script>

③.通过标签名查找 HTML 元素（getElementsByTagName）：数组

<script>
    var one = document.getElementsByTagName("div")[0];
    one.onclick=function(){
        this.style.cssText="width:200px;height:200px;border: 10px solid blue;"
    }
</script>

④.通过选择器查找 HTML 元素（querySelectorAll）：数组

<script>
    var one = document.querySelectorAll(".test")[0];
    one.onclick=function(){
        this.style.cssText="width:200px;height:200px;border: 10px solid blue;"
   }
</script>

2、DOM属性

1、innerHTML 属性

<p id="p">hello world</p>
![](images/down.jpg)
<button id="btn">修改</button>

<script>
    var btn = document.getElementById("btn");
    var p = document.getElementById("p");
    var img = document.getElementById("img");
    btn.onclick=function(){
        p.innerHTML="修改";
        p.style.color="pink";
        img.src="images/icon1.png"
        p.style.cssText = " background-color:red ";
    }
</script>

【在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。】

二、for循环

for 循环的语法：

for (语句 1; 语句 2; 语句 3) {
            被执行的代码块
  }

<ul>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ul>

<script>
    var li = document.querySelectorAll("ul>li");
    console.log(li.length);
    for(var i=0;i<li.length;i++){
        li[i].onclick=function(){
            this.style.color="pink"
        }
    }
</script>

//    length：长度

例子：for循环乘法表

<script>
    for(var i=1;i<=9;i++){
        for(var n=1;n<=i;n++){
            document.write(i+"*"+n+"="+i*n+"    ");
        }
        document.write("<br>")
    }
</script>