JavaScript学习笔记——innerHTML和innerText、nodeType、DOM对象加载

innerHTML和innerText的区别

value：标签的value属性
innerHTML：双闭合标签里面的内容（识别标签）
innerText：双闭合标签里面的内容（不识别标签）

        <div id="box" value="111">
            <div>
                <a href="#">box</a>
            </div>
        </div>

		<script>
            var div1 = document.querySelector("#box").innerHTML;
            var div2 = document.querySelector("#box").innerText;
            console.log(div1);
            console.log(div2);
        </script>

在这里插入图片描述

nodeType属性

nodeType == 1 表示的是元素节点（标签）
nodeType == 2 表示是属性节点
nodeType == 3 是文本节点

	var type1 = document.querySelector("#box1").nodeType;
	var type2 = document.querySelector("#box1").getAttributeNode("id").nodeType
	var type3 = document.querySelector("#box2").firstChild.nodeType;

	console.log(type1); //输出1
    console.log(type2); //输出2
    console.log(type3); //输出3

nodeType、nodeName、nodeValue

	<div id="box1" value="111">
		<div id="box2">
			box
        </div>
    </div>

	<script>
        var type1 = document.querySelector("#box1");
        var type2 = document.querySelector("#box1").getAttributeNode("id");
        var type3 = document.querySelector("#box2").firstChild;

        console.log(type1.nodeType);
        console.log(type2.nodeType);
        console.log(type3.nodeType);
        console.log('-----------------');
        console.log(type1.nodeName);
        console.log(type2.nodeName);
        console.log(type3.nodeName);
        console.log('-----------------');
        console.log(type1.nodeValue);
        console.log(type2.nodeValue);
        console.log(type3.nodeValue);

在这里插入图片描述

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。
如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象

onload 事件

onload 事件会在整个页面加载完成之后才触发。
为 window 绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
      // 【方式一：先加载，后执行】这段 js 代码是写在 <head> 标签里的，所以建议放在 window.onload 里面。
      window.onload = function() {
    
    
        // 获取id为btn的按钮
        var btn = document.getElementById("btn");
        // 为按钮绑定点击事件
        btn.onclick = function() {
    
    
          alert("hello");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>

    <script type="text/javascript">
      // 【方式二：后加载，后执行】这段 js 代码是写在 <body> 标签里的，代码的位置是处在页面的下方。这么做，也可以确保：在页面加载完毕后，再执行 js 代码。

      // 获取id为btn的按钮
      var btn = document.getElementById("btn");
      // 为按钮绑定点击事件
      btn.onclick = function() {
    
    
        alert("hello");
      };
    </script>
  </body>
</html>