DOM

最新推荐文章于 2022-07-04 08:30:00 发布

w_cyj

最新推荐文章于 2022-07-04 08:30:00 发布

阅读量142

点赞数

分类专栏： js 文章标签： dom

本文链接：https://blog.csdn.net/w_cyj/article/details/107874967

版权

js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

Dom节点

什么是节点

HTML 文档中的每个成分都是一个节点。

（1）节点类型

DOM 是这样规定的：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

（2）节点层次关系-节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。
HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
<head> 和 <body> 的父节点是 <html> 节点，文本节点 “Hello world!” 的父节点是 <p> 节点。
<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 “DOM Tutorial”。
当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1> 和 <p>是同辈，因为它们的父节点均是 <body> 节点。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。

（3）节点属性

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

元素节点的 nodeName 是标签名称
文本节点的 nodeName 永远是 #text
注释节点的 nodeName 永远是 #comment

nodeValue（节点值）

文本节点，nodeValue 属性包含文本
元素节点nodeValue不可用
注释节点nodeValue包括注释内容

nodeType（节点类型）
- 节点属性
  - nodeName（节点名称）
    - 元素节点的 nodeName 是标签名称
    - 文本节点的 nodeName 永远是 #text
    - 注释节点的 nodeName 永远是 #comment
  - nodeValue（节点值）
    - 文本节点，nodeValue 属性包含文本。
    - 注释节点nodeValue包括注释内容
  - nodeType（节点类型）
    - 元素—1
    - 属性----2
    - 文本----3
    - 注释—8
    - 文档----9
获取Dom元素
- documeng.getElementById()
  - 通过id获取元素
- document.getElementByTagName()
  - 通过标签名获取标签列表，只能通过document获取,HTMLCollection
- document.getElementByName()
  - 通过name属性获取节点列表，只能通过document获取,NodeList是有forEach方法遍历
- document.getElementByClassName(新)
  - 通过Class名获取标签列表，任何标签都可以获取其子项中Class列表,HTMLCollection
- document.querySelector(新)
  - 根据标签名获取第一个元素
- document.querySelectorAll(新)
  - 获取所有标签名的元素
节点的创建
- document.createElement(“标签名”) : 创建新元素
- document.createTextNode("") : 创建文本节点
节点的插入

(父对象.insertBefore(新插入的对象，目标插入对象之前（兄弟节点对象）,当父对象下无子节点的时候不适用)
document,.body
- appendChild(node) : 向childNodes末尾插入一个节点node
- insertBefore(newElement,targetElement) : 向targetNode之前插入节点node
节点的替换
- replaceChild(newNode,oldNode) : newNode替换节点oldNode
节点的删除
- removeChild(node) : 移除父节点的某个子节点
- remove()：移除当前节点
节点的复制

cloneNode(boolean) : 复制一个节点复制节点后使用插入或者添加都可以完成节点的粘贴，但是仅能粘贴一次，仅为最后一次
true：深复制，复制节点及其整个子节点树
false : 浅复制，只复制节点本身。
- cloneNode(boolean) : 复制一个节点
节点的遍历
- childNodes：所有子节点获取所有子节点（包括注释）
- children：所有是标签类型的子节点获取所有子元素
- parentNode：获取已知节点的父节点
- parentElement 取已知节点的父元素
- firstElementChild : 第一个子节点（元素）
- firstChild : 第一个子节点
- lastElementChild：最后一个子节点（元素）
- lastChild：最后一个子节点
- nextElementSibling：下一个兄弟节点（元素）
- nextSibling：下一个兄弟节点
- previousElementSibling：上一个兄弟节点
- previousSibling：上一个兄弟节点

Dom属性

DOM 对象属性
- 分为自定义型和原DOM对象属性
- DOM的对象原属性与DOM对象的标签属性部分对应，部分有差别
DOM 标签属性

1.设置标签的属性和值，值和属性都必须是字符类型。2.DOM的标签属性命名，不能使用大小写区分不适用下划线区分。
3.属性名必须全小写字母，并且使用-区分每个单词
- getAttribute(属性)：
  - 获取标签属性
- setAttribute(属性,值)：
  
  setAttribute(属性,值)：我们想要把一个类名改为 demo
  div.setAttribute(“class”,”demo”);
  - 给节点创建一个新属性
- removeAttribute(name)
  - 删除标签属性
Dom常用属性
- document.body：body元素
- document.title：获取、设置文档的标题
- document.URL：获得完整的URL
- document.domain：获取域名

Bom和Dom的区别

BOM

BOM是Browser Object Model的缩写，即浏览器对象模型。
BOM没有相关标准。不同浏览器定义有差别,实现方式不同。
BOM的最根本对象是window。
DOM
DOM是Document Object Model的缩写，即文档对象模型。
DOM是W3C的标准。
DOM最根本对象是document（实际上是window.document）。
DOM的最根本的对象是BOM的window对象的子对象
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

w_cyj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

Dom节点什么是节点HTML 文档中的每个成分都是一个节点。（1）节点类型DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点（2）节点层次关系-节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的
复制链接

扫一扫

专栏目录