1. API 和Web API
什么是API?
API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能
什么是Web API?
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
2.DOM简介
2.1什么是DOM
文档对象模型(Document Object Model),是W3C组织推荐的可处理扩展标记语言(HTML或者XML)的标准编程接口
2.2 DOM树
文档: 一个页面就是一个文档,DOM中使用document表示
元素: 页面中所有标签都是元素,DOM中使用element表示
节点: 网页中所有的内容都是节点,DOM中是哟node表示
DOM把以上内容都看作是对象
3. 元素操作
3.1获取普通元素
通过 id 获取:
document.getElementById("id名")
<div id="one"> </div>
<script>
var div = document.getElementById("one");
</script>
通过标签名获取:
document.getElementsByTagName("标签名")
<div> </div>
<div> </div>
<div> </div>
<script>
var divs = document.getElementsByTagName("div");
</script>
H5新增获取元素方式-根据类名获得:
document.getElementsByClassName("类名")
<div class="box"> </div>
<div class="box"> </div>
<div class="box"> </div>
<script>
var divs = document.getElementsByClassName("box");
</script>
H5新增获取元素方式-通过选择器获得:
document.querySelector("选择器")
document.querySelectorAll("选择器")
<div class="box" id="one">第一个</div>
<div class="box" id="one">第二个</div>
<div class="box" id="one">第三个</div>
<script>
//获取匹配的第一个元素
var div = document.querySelector("div"); //标签选择器获取
var div = document.querySelector("#id");