JavaScript之彻底搞懂DOM与BOM及其区别与用法(1)

2401_83974590

已于 2024-04-05 01:02:56 修改

阅读量343

点赞数 4

分类专栏： 2024年程序员学习文章标签： javascript 前端开发语言

于 2024-04-05 01:02:54 首次发布

本文链接：https://blog.csdn.net/2401_83974590/article/details/137387085

版权

2024年程序员学习专栏收录该内容

254 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM（DocumentObjectModel）中创建、增添和删除节点的方法，以及DOM的一些常见属性。同时概述了BOM（BrowserObjectModel）的概念，重点讲解了window和location对象及其常用属性和方法。旨在帮助前端开发者掌握浏览器操作的核心技术。

摘要由CSDN通过智能技术生成

🌳 创建节点(Node)的DOM方法

//1.创建一个html的元素，传参是元素类型，例如div、h1-5、a，下以div为例

var element = document.createElement(“div”)

//2.创建一个文本节点，传参的是对应的文本内容(注意是文本节点，不是某个html元素)

var text_node = document.createTextNode(text)

//3.创建一个属性节点，传参是对应的属性名

var attr_node = document.createAttribute(attribute_name)

element.setAttributeNode(attr_node)

特别注意第三个，创建属性节点这个方法，要搭配具体的元素，也就是你要先获取某个具体元素element，创建一个属性节点，最后对这个元素添加这个属性节点(setAttributeNode)。

🌳 增添节点的DOM方法

//1.向element内部的最后面添加一个节点，传入的参数是节点类型

element.appendChild(Node)

//2.向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数

element.insertBefore(new_Node,existed_Node)

注意，添加节点之前，你要先创建好节点，同时要选好父节点element，第二个方法甚至你还要找好插入位置后面的兄弟节点。

🌳 删除节点的DOM方法

//删除element内的某个节点，传参是节点类型参数

element.removeChild(Node)

注意，删除时，要找到对应的父节点element才可以顺利删除。

🌳 DOM常见的一些属性

最后是一些常见的DOM属性：

//1.获取当前元素的父节点

var element_father = element.parentNode

//2.获取当前元素的html元素型子节点

var element_son = element.children

//3.获取当前元素的所有类型子节点，包括html元素、文本和属性

var element_son = element.childNodes

//4.获取当前元素的第一个子节点

var element_first = element.firstChild

//5.获取当前元素的前一个同级元素

var element_pre = element.previousSibling

//6.获取当前元素的后一个同级元素

var element_next = element.nextSibling

//7.获取当前元素的所有文本，包括html源码和文本

var element_innerHTML = element.innerHTML

//8.获取当前元素的所有文本，不包含html源码

var element_innerTEXT = element.innerText

其中，第七个的意思是说把元素内的html代码和文本都转成文本，原先的html代码是执行的，转成文本相当于变成了普通的字符串！

III. BOM及其相关操作

==============

III.I BOM总述

下面我们再讲一讲BOM，由于篇幅有限，BOM不做特别细致的讲解(实用性的确也没有DOM那么大)。我们回顾一下开始的时候关于BOM的介绍：

BOM给JavaScript提供用来操作浏览器的若干的"方法"

那么首先我们用一张图把整个BOM的结构给大家梳理一下，与DOM类似，BOM也有一个树状结构：

III.II BOM常见对象的介绍

🌳window对象

从上面这张图上，我们可以看到：

window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。

window对象有以下常见的属性和方法：

属性/方法	含义
opener	当前窗口的父窗口
length	窗口中的框架数
document	窗口中当前显示的文档对象
alert(string)	创建一个警告对话框，显示一条信息
close()	关闭窗口
confirm()	创建一个需要用户确认的对话框
open(url,name,[options])	打开一个新窗口并返回新 window 对象
prompt(text,defaultInput)	创建一个对话框要求用户输入信息
setInterval(expression,milliseconds)	经过指定时间间隔计算一个表达式
setInterval(function,millis enconds,[arguments])	经过指定时间间隔后调用一个函数
setTimeout(expression,milli seconds)	在定时器超过后计算一个表达式
setTimeout(expression,milli seconds,[arguments])	在定时器超过时后计算一个函数