bluemsun第五周预习(DOM和BOM）

lemdry

已于 2024-04-21 15:25:16 修改

阅读量826

点赞数 21

文章标签：前端 javascript html

于 2024-04-21 15:24:05 首次发布

本文链接：https://blog.csdn.net/lemdry/article/details/137870917

版权

一.js与BOM、DOM的关系

JavaScript = ECMAscript + BOM + DOM

ECMscript是一种规范，而其余的两个都是提供了"方法"，分别对应HTML元素和浏览器。

二.DOM

1.DOM树

对于DOM树，就是我们日常接触的html中的元素

DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。

①.文档节点：在树的顶端是文档节点，它呈现整个页面。

②.元素节点：需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。<html>，<a>，<body>即标签

③.属性节点：属性节点不是所在元素的子节点，它们是这个元素的一部分。当访问一个元素时，有特定的方法和属性用来读取或修改这个元素的属性。元素的属性，如<a>中的href属性

通过document.getElementById 和 document.body 获取的元素就是获取元素的节点

④.文本节点：当访问元素节点，可以访问元素内部的文本。文本节点没有子节点。向用户展示的内容，如<title>...</title>中的“文档标题”，<p>hello world</p> 中的内容

其中DOM可以改变html中的节点

以下例子来自网络：

2.DOM的一些常见的操作元素方法

🌳 获取节点的DOM方法
//1.通过元素的id属性值来获取元素，返回的是一个元素对象
var element = document.getElementById(id_content)

//2.通过元素的name属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByName(name_content)

//3.通过元素的class属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByClassName(class_content)

//4.通过标签名获取元素，返回的是一个元素对象数组
var element_list = document.getElementsByTagName(tagName)
🌳 获取/设置元素的属性值的DOM方法
//1.获取元素的属性值，传参自然地是属性名，例如class、id、href
var attr = element.getAttribute(attribute_name)

//2.设置元素的属性值，传参自然地是元素的属性名及要设置的对应的属性值
element.setAttribute(attribute_name,attribute_value)
🌳 创建节点(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