dom获取 事件11-24

dom获取

DOM Document Object Model 文档对象模型

	<script type="text/javascript">
		alert(123)
	</script>
	<a href="http://www.baidu.com">百度</a>

html标签 == 元素 == 节点 Element
1- 获取button按钮的元素对象 并将内容修改为 i love button
2- 通过循环修改多个a链接的内容

	<a id="a" href="">baidu</a>
    <button>我是一个按钮</button>
	<script type="text/javascript">
	console.log(document.getElementById("a"))
	// 根据id获取指定元素（标签）对象，将数据存储到本地变量a中
	var a = document.getElementById("a")
	// 修改标签之间的内尔用
	a.innerHTML = "百度"

事件

在事件对应的属性中设置一些js代码
当事件触发时，执行此代码

此种方式我们成为结构与行为的耦合
不方便维护,不推荐使用

    //对button标签绑定了一个单击事件
    <button onclick="alert('hello world')">按钮</button>
    <!-- 对div标签绑定了鼠标移入的事件 -->
    <div onmouseover="alert('hello javascript')"></div>
    <div style="width:100px;height:200px;background:pink"></div>
    <button id="btn">你敢点我下试试</button>
    <script type="text/javascript">

事件：浏览器与用户之间交互的行为
鼠标移动 、 鼠标点击 ，。。。。。。。。

     // 根据指定id获取元素对象
	 var btn = document.getElementById("btn")
	 // 对btn元素对象注册单击事件， 当事件触发时 执行回调处理函数
	 btn.onclick = function(){
		alert("试试就试试")
	 }

文档加载

1- 浏览器加载页面时，自上而下的顺序加载的，读取到一行就运行一行，如果 将script标签写到页面的顶部在执行代码时，页面没有加载，页面也没有加载dom对象 就会导致无法获取dom对象

2- onload 事件在整个页面加载完成之后才触发可以给window绑定onload事件此事件的回调处理函数在页面加载完成时候执行确保咱们可以执行所有的dom对象

    <button id="btn">按钮</button>
    <script type="text/javascript">
		window.onload = function(){
			var id = document.getElementById("btn")
			console.log(id)
		}
    </script>

当点击按钮时使 div的内容修改为 hello js

 <button id="btn">按钮</button>
 <div id="div">hello world</div>
	<script type="text/javascript">
         window.onload = function(){
              // 获取到两元素对象
             var btn = document.getElementById("btn")
             var div = document.getElementById("div")

            // 绑定事件
             btn.onclick = function(){
	         // 修改div的内容为 hello js
	         div.innerHTML = "hello js"
            }
       }
    </script>