索鸟网

  1. 首页
  2. DOM操作--你究竟知道多少

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


前言

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

CSS如何工作?

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

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

关于DOM

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

如何操作DOM

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

  1. 更新:更新该节点表示的HTML内容
  2. 遍历:遍历该节点下的子节点,然后可以按需操作
  3. 添加:在改DOM节点下动态增加一个HTML子节点
  4. 删除:把该节点从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操作实质是什么?有什么区别?哪个速度更快性能根好,为什么?

javascript css html html5 node.js

来源地址:https://segmentfault.com/a/1190000010401107 版权归作者所有!

相关教程

  • 关于Serverless架构及平台选择,你知道多少?

    数人云近来给大家分享了很多DevOps相关文章,Serverless架构是最近两年比较火的一个话题,它可以帮助DevOps实践落地,更加灵活,提高工作效率、交付速度等等。 今天数人云就跟大家一起看看Serverless架构的前世今生以及Amazon Web Services、Microsoft Azure、Google Cloud Platform、I
  • Sublime Text 3安装和插件安装,你知道多少呢?

    Sublime text 3常用插件安装话不多说,直接让我们来安装吧!!! 第一步:安装Sublime Text 3。安装网址:http://www.sublimetext.com/3 第二步:使用Package Control组件安装系列插件。 使用快捷键 Ctrl+` 显示出console. 粘贴以下代码到底部命令行,回车.import urll
  • DOM操作

    1基本介绍 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问,以改变文档的结构,样式和内容。DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说,它将web 页面和脚本或编程语言连接起来了。 从以上论述,我们大概知道:
  • Sublime Text 3 安装和常用插件安装,你知道多少?

    Sublime text 3常用插件安装 话不多说,直接让我们来安装吧!!! 第一步:安装Sublime Text 3。安装网址:http://www.sublimetext.com/3 第二步:使用Package Control组件安装系列插件。 1. 使用快捷键 Ctrl+` 显示出console. 2. 粘贴以下代码到底部命令行,回车.
  • Sublime Text 3 安装和常用的插件安装 你知道多少呢!

    Sublime text 3常用插件安装 话不多说,直接让我们来安装吧!!! 第一步:安装Sublime Text 3。安装网址:http://www.sublimetext.com/3 第二步:使用Package Control组件安装系列插件。 1. 使用快捷键 Ctrl+` 显示出console. 2. 粘贴以下代码到底部命令行,回车.
  • PHP对数据库MySQL的连接操作,你知道几种

    PHP可以利用扩展、框架进行对数据库的CURD操作。当连接MySQL数据库服务器的时候,PHP中提供的用于MySQL的主要API有三种:mysql扩展、mysqli扩展、PHP数据对象PDO。 以下示例这几种方式连接数据库的代码。 MySQL的用户配置: $host = "localhost"; //连接的数据库端口号 $user = "root";
  • JavaScript的DOM操作

    JavaScript的DOM操作 什么是 DOM? 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。 为简单起见,在API参考文档中的语法实例通常会使用el
  • javascript dom操作API

    1)创建节点:除了可以使用createElement创建元素,也可以使用 . createTextNode创建文本节点. document.body指向的是<body>元素; document.documentElement则指向<html>元素 var createNode = document.createEleme