学习WebApais中的学习心得（一）

学习WebApais中的学习心得（一）

一、WebApis是什么？

webApis简单的来讲就是调用DOM和BOM的接口功能，对HTML结构
结构，标签，属性的修改。
学习这些Api有什么用？用处就是和JS的语法结合去做网页交互的。

二、DOM是什么关于DOM的理解

1.DOM

是改变网页的内容样式结构的接口功能

关于DOM树的理解是：
1一个页面就是一个文档，在DOM中用document表示
2元素：就是DOM中所有的标签
3节点：node就是文档中所有的（属性，标签，文档，注释）
都可以用node表示

获取元素的方式

我们做一个案例点击事件，当按钮被点击后，一个width:300px;
height:200px；background-color: blue;,用上述的方法获取标签，进行事件点击，并获改变颜色

.box {
           width: 200px;
           height: 500px;
           background-color: blue;
           }

    <div class="box">加油你要相信你自己你是可以的</div>
            <button>打我</button>

           var box = document.querySelector(".box");
           var btn = document.querySelector("button");
       btn.onclick = function(){
             box.style.backgroundColor = "green";
            }
      //**Element.style:进行样式修改的话是相当于行内样式的**
      //var box = document.getElementsByClassName(".box");
      //  var box =  document.getElementsByTagName("div");
      // var box = document.getElementById("box11");
      // var box = document.querySelectorAll(".box22");为什么这三种方法不行呢？  因为是返回的对象的集合
                // box[0].onclick = function(){
                //   box.style.backgroundColor = "green";
                    // box.innerHTML="wocao";
            //   }

---

总结

提示：这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了dom的使用，而domAPi提供了大量能使我们快速便捷地获取标签，此外我们一定要注意是返回的对象还是返回的对象集合呢？