DOM操作--你究竟知道多少

clasnake 发布于2019-08-20 18:22 / 777人阅读

摘要：分为以下两个阶段处理文档浏览器将和转化成文档对象模型。在计算机内存中表示文档。它把文档内容和其样式结合在一起。浏览器显示的内容。这些节点由他们与其他节点的关系来定义。如何操作由于和转化成了树，要改变的结构，就需要通过来操作。

前言

DOM常常挂在我们嘴边，但是我们又是否理解它呢？带着这个疑问我开始了

CSS如何工作？

但浏览器显示文档时，它必须将文档的内容与其样式信息结合。分为以下两个阶段处理文档：

浏览器将HTML和CSS转化成DOM（文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。

浏览器显示DOM的内容。

关于DOM

DOM是一种树形结构。标记语言中的每个元素、属性、文本片段都变为一个DOM节点。这些节点由他们与其他DOM节点的关系来定义。

如何操作DOM

由于HTML和CSS转化成了DOM树，要改变HTML的结构，就需要通过javascript来操作DOM。
操作一个DOM节点有如下几个操作：

更新：更新该节点表示的HTML内容

遍历：遍历该节点下的子节点，然后可以按需操作

添加：在改DOM节点下动态增加一个HTML子节点

删除：把该节点从HTML中删除，删除内容包括几点内容和其下面子节点内容

操作代码

1、获取节点

var test = document.getElementById("test");
var tr = document.getElementsByTagName("tr");//返回DOM数组
var test_tr = test.getElementsByTagName("tr");//返回DOM数组
var class_tr = document.getElementsByClassName("tr_class");//返回DOM数组
var test_parent = test.parentElement;
var test_parent = test.parentNode;
var next_el = test.nextElementSibling;
var previous_el = test.previousElementSibling;
var test_child = test.children;
var test_first_child = test.firstElementChild;
var test_last_child = test.lastElementChild;
//新方法低版本IE<8不支持
var test = document.querySelector("#test");
var tr = document.querySelectorAll("#test tr");//返回的是DOM数组

2、创建节点

var el = document.createElement("div");//标签
var node_txt = document.createTextNode("hell world");//HTML属性

3、DOM更改

// 添加、删除子元素
test.appendChild(el);
test.removeChild(el);

// 替换子元素
test.replaceChild(el1, el2);

// 插入子元素
var el3 = document.createElement("p");
test.insertBefore(el3, el);

4、属性操作

// 获取一个{name, value}的数组
var attrs = test.attributes;

// 获取、设置属性
var className = test.getAttribute("class");
test.setAttribute("class", "test_class");

// 判断、移除属性
test.hasAttribute("class");
test.removeAttribute("class");

// 是否有属性设置
test.hasAttributes();

思考

vue.js、handlebar.js、react.js等等，DOM操作实质是什么？有什么区别？哪个速度更快性能根好，为什么？

云服务器 GPU云服务器你知道你应该知道数据分析知道你百度一下你就知道了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84423.html

DOM操作--你究竟知道多少

摘要：分为以下两个阶段处理文档浏览器将和转化成文档对象模型。在计算机内存中表示文档。它把文档内容和其样式结合在一起。浏览器显示的内容。这些节点由他们与其他节点的关系来定义。如何操作由于和转化成了树，要改变的结构，就需要通过来操作。前言 DOM常常挂在我们嘴边，但是我们又是否理解它呢？带着这个疑问我开始了 CSS如何工作？但浏览器显示文档时，它必须将文档的内容与其样式信息结合。分为以下两个...

CoyPan 2019-08-29 13:02 评论0 收藏0
DOM操作--你究竟知道多少

摘要：分为以下两个阶段处理文档浏览器将和转化成文档对象模型。在计算机内存中表示文档。它把文档内容和其样式结合在一起。浏览器显示的内容。这些节点由他们与其他节点的关系来定义。如何操作由于和转化成了树，要改变的结构，就需要通过来操作。前言 DOM常常挂在我们嘴边，但是我们又是否理解它呢？带着这个疑问我开始了 CSS如何工作？但浏览器显示文档时，它必须将文档的内容与其样式信息结合。分为以下两个...

13651657101 2019-08-01 17:16 评论0 收藏0
[译] 究竟什么是DOM？!

摘要：是我写的吗还是我偶尔打开控制台检查元素的时候点击的元素说实话，我花了好长时间才弄明白究竟是什么。什么简单来说，是在浏览器中的表示形式，允许您操纵页面。那么为什么它经常被称为树呢这是因为从一个父项开始，该父项扩展为子项。原文自工程师Kara Luton博客，传送门 DOM，当我第一次在训练营学习编码时，就一直听到这个词，但是我从来不知道它到底是什么意思。是我写的HTML吗？还是我偶尔...

winterdawn 2019-08-02 14:33 评论0 收藏0
[译] 究竟什么是DOM？!

摘要：是我写的吗还是我偶尔打开控制台检查元素的时候点击的元素说实话，我花了好长时间才弄明白究竟是什么。什么简单来说，是在浏览器中的表示形式，允许您操纵页面。那么为什么它经常被称为树呢这是因为从一个父项开始，该父项扩展为子项。原文自工程师Kara Luton博客，传送门 DOM，当我第一次在训练营学习编码时，就一直听到这个词，但是我从来不知道它到底是什么意思。是我写的HTML吗？还是我偶尔...

church 2019-08-26 18:18 评论0 收藏0