JavaScript之DOM 学习笔记(1)

ParadoxTuT

已于 2022-09-03 14:13:18 修改

阅读量202

点赞数

于 2022-09-03 14:07:32 首次发布

本文链接：https://blog.csdn.net/m0_56369204/article/details/126676856

版权

JavaScript DOM 事件处理节点操作 innerHTML

关键词由CSDN通过智能技术生成

补补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)直接获取

获取元素节点的子节点

通过具体的元素节点调用

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查询方法

document.body //可以获取到body对象
document.all //获得页面中所有元素(结果是数组)
document.querySelector(“选择器”) //可通过CSS选择器(即.classname，div这类的)查找，但是此方式只会返回一个元素，即使有多个满足条件。
document.querySelectorAll(“选择器”) //同上，返回的是数组，可有多个元素

3.DOM的增、删、改

A.增加

第一种方式

创建一个节点

document.createElement() //创建一个新元素，参数是其tagname
- 给节点增加内容
  
  节点.createTexrNode(“”)
在当前节点下增加一个新节点

appendChild(子节点)
- 在一个子节点前面新插入一个子节点
  
  父节点.insertBefore(new, old) //参数为新旧节点