JavaScript之DOM 学习笔记(1)

补补js基础，学校在上网课，不用担心上课影响学习啦~

参考的是尚硅谷的js基础140讲，讲的很好，适合小白

链接在此： JavaScript基础

快速查看

1. 基础概念与操作

• DOM：即Document Object Model 文档对象模型

  可以通过DOM对html文档(一个网页)进行操作，网页的每一部分都作为一个对象，由这些对象之间的关系我们可以构造一个模型。

  给出DOM中任意一对象，我们可以根据关系对其他所有对象进行操作。

• 节点: Node，是构成网页最基本的部分，网页中的每一部分都可作为一个节点。

  上述对象都可称作节点

  常见分为四类：

  1. 文档节点，即整个文档

  2. 元素节点，文档中的html标签

  3. 属性节点，元素的属性

  4. 文本节点，文本内容

     • 获取一个对象并对其进行修改

       <div>
        <button id="btn">小按钮</button>
          <script type="text/javascript">
           var btn = document.getElementById("btn");  /*利用文档对象通过id获取按钮这个对象*/
           btn.innerHTML = "a button"; //修改btn中的文本值
          </script>
       </div>
       

• 事件：即文档或浏览器窗口中发生的一些交互瞬间

  如点击按钮，输入等等，我们可以将事件与一些js代码绑定实现许多功能。

  • 获取按钮对象并处理点击事件

    <div>
     <button id="btn">小按钮</button>
       <script type="text/javascript">
        var btn = document.getElementById("btn");  /*利用文档对象通过id获取按钮这个对象*/
        btn.onClick = function(){
        console.log("正在点击中")
        };
       </script>
    </div>
    

  • 需要注意的是，浏览器加载页面是自上而下的，故js代码应该在对象下面，我们可以利用onload来实现js代码在对象上面

    onload事件会在页面加载后再触发，我们可以利用将js代码放到与之绑定的函数内。

2. DOM查询

获取元素节点

• 通过document对象调用元素节点

  1. getElementsById()

  2. getElementsByTagName() //通过标签名获取节点对象

  3. getElementsByName() //通过name属性获取节点对象

• innerHTML用于获取元素内部的HTML代码， 但是对于自结束标签(没有内部内容)没有意义，自结束标签的相关属性可以用.运算符如(.value)直接获取

• 获取元素节点的子节点

  • 通过具体的元素节点调用

    1. getElementsByTagName()

       //是一种方法，返回的是当前节点指定标签名的后代节点

              2. childNodes       //表示当前节点的所有节点
       
              3. firstChild           //表示当前节点的第一个子节点
       
              4. lastChild           //含义同上
       
       ***需要注意的是DOM标签间的空白会被当文本节点，故一般我们用children(返回当前元素的所有子元素)***
       

• 获取父节点和兄弟节点

  1. parentNode //表示当前元素的父节点

  2. previousSibling //表示当前节点的前一个兄弟节点

  3. nextSibling //表示当前节点的后一个兄弟节点

     funtion (name, fun) {
         var button = document.getElementById(name);
         button.onClick = fun;                  //将fun函数作为参数传入，故在赋值语句右边
     

     innerText可以只获取元素内部的文本，不同innerHTML

一些利用document的属性DOM查询方法

1. document.body //可以获取到body对象

2. document.all //获得页面中所有元素(结果是数组)

3. document.querySelector(“选择器”) //可通过CSS选择器(即.classname，div这类的)查找，但是此方式只会返回一个元素，即使有多个满足条件。

4. document.querySelectorAll(“选择器”) //同上，返回的是数组，可有多个元素

3.DOM的增、删、改

A.增加

第一种方式

• 创建一个节点

  document.createElement() //创建一个新元素，参数是其tagname

  • 给节点增加内容

    节点.createTexrNode(“”)

• 在当前节点下增加一个新节点

  appendChild(子节点)

  • 在一个子节点前面新插入一个子节点

    父节点.insertBefore(new, old) //参数为新旧节点

第二种方式

• 使用innerHTML属性直接将其添加

  父节点.innerHTML += 想要增加的html

小结

后一种方式比前一种方式简单，但是其会使所有子节点都重新创建(会将其绑定的函数都取消)，故我们应结合两种方式

• 步骤如下

  • 创建一个新节点

  • 利用新节点的innerHTML属性给其增加内容

  • 利用appendChild()将此新节点增加到父节点中

B.修改

• 用一个新节点替换子节点

  父节点.replaceChild(new, old)

C.删除

• 删除子节点

  父节点.removeChild(子节点)

  当不知道要删除节点的父节点为谁时，可以利用.parentNode获取其父节点