什么时DOM

　　DOM:文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来范文文档结构.目的起始就是为了能让js操作html元素而指定的一个规范.

　　DOM就是由节点组成的.

解析过程

　　HTML加载完毕,渲染引擎会在内存中吧HTML文档,生成一个DOM树,getElementById时获取DOM中的元素节点,然后操作的时候修改的时该元素的属性.

DOM树(一切都是节点)

DOM的数据结构如下：

　　上图可知,在HTML当中,一切都是节点:(非常重要)

　　　　元素节点:HTML标签.

　　　　文本节点:标签中的文字(比如标签之间的空格.换行)

　　　　属性节点:标签的属性.

　　这个html文档就是一个文档节点,所有的节点都是Object.

DOM可以做什么

　　找对象(元素节点)

　　设置元素的属性

　　设置元素的样式

　　动态创建和删除元素

　　事件的触发相应;事件源,事件,事件的驱动程序

DOM节点的获取

　　DOM节点的获取方式起始就是获取事件源的方式

　　操作元素节点,必须首先找到该节点,有三种方式可以获取DOM节点:

    var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

    var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。

特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：

    document.getElementsByTagName("div1")[0];    //取数组中的第一个元素

    document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

DOM访问关系的获取

`

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。如下：

节点的访问关系，是以属性的方式存在的。

JS中的父子兄访问关系：

　　这里我们要重点知道parentNode和children这两个属性的用法。下面分别介绍。

获取父节点

　　调用者就是节点,一个节点只有一个父节点,调用方式就是

节点.parenNode

　　(1)nextSibling:

　　　　指定的时下一个节点(包括标签,空文档和换行节点).

    • 火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。

    • IE678版本：指下一个元素节点（标签）。

　　(2) nextElementSibling:

　　　　火狐.谷歌.IE9+版本:都是指下一个元素节点(标签)

　　　　总结:为了获取下一个元素节点我们可以:在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

　　(3)补充:获得任意一个兄弟节点

节点自己.parentNode.Children[index]; //随意得到兄弟节点

获取单个的子节点

1、第一个子节点 | 第一个子元素节点：

（1）firstChild：

  • 火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。

  • IE678版本：指第一个子元素节点（标签）。

（2）firstElementChild：

  • 火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。

总结：为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：

 第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

2、最后一个子节点 | 最后一个子元素节点：

（1）lastChild：

  • 火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。

  • IE678版本：指最后一个子元素节点（标签）。

（2）lastElementChild：

  • 火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。

总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：

 最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

获取所有的子节点

　　(1) childNodes:标准属性.返回的是指元素的子节点的集合,(包括元素节点.所有属性.文本节点).是W3C的亲儿子.

　　火狐.谷歌等高版本会把换行也看作是子节点

用法:

子节点数组 = 父节点.childNode; //获取所有节点

　　(2) children:非标准属性.返回的是只元素的子元素节点的集合

　　　　他只返回HTML节点,甚至不反悔文本节点

　　　　他在IE6/7/8 中包含注释节点(IE678,中,注释节点不要写在前面)

　　虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所偶浏览器的支持.

　　用法:(用的最多)

子节点数据 = 父节点.children;// 获取所有子节点.用的最多

nodeType

这里讲一下nodeType。

  • nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。

  • nodeType == 2 表示是属性节点 了解

  • nodeType == 3 是文本节点 了解

DOM节点操作

　　上一段的内容:节点的访问关系都是属性.节点操作都是函数(方法).

　　创建节点

　　格式如下:

新的标签(元素节点) = document.createElement("标签名")

　　比如,我们想创建一个li标签,或者是创建一个不沉溺在的abdb标签,可以这样做:

<script type="text/javascript">

    var a1 = document.createElement("li");   //创建一个li标签

    var a2 = document.createElement("adbc");   //创建一个不存在的标签

    console.log(a1);

    console.log(a2);

    console.log(typeof a1);

    console.log(typeof a2);

</script>

　　

结果：

插入节点

　　插入节点有两种方式,他们的含义是不同的.

　　方式1:

父节点.appendChild(新的子节点,作为参考的子节点); //父节点的最后插入一个新的子节点

　　方式2:

父节点.insertBefore(新的子节点,作为参考的子节点);

　　　解释:

　　　　    在参考节点前插入一个新的节点

　　　　　如果参考接待你为null,那么他将在父节点最后插入一个子节点.

　　删除节点

父节点.removeChild(子节点);//用父节点删除子节点.必须要指定是删除哪个子节点.

//如果删除自己这个节点,可以这么做

nodel.parentNode.removeChild(nodel);

　　复制节点

要复制的节点.coneNode(); //括号里不带参数和带参数false,效果是一样的.

要复制的节点.cloneNode(true);

//不带参数/带参数false:只复制节点本身,不复制子节点

//带参数true:既复制节点本身,也复制所有的子节点.

　　设置节点属性

　　　　我们可以获取节点的属性值,设置节点的属性值,删除节点的属性

　　　　统一拿下面的标签来举例

<img src="data:images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

　　下面分别介绍

　　1.获取节点的属性

　　　　方式一:

元素节点.属性;

元素节点[属性];

　　举例:

<body>

<img src="data:images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

<script type="text/javascript">

    var myNode = document.getElementsByTagName("img")[0];

    console.log(myNode.src);

    console.log(myNode.className);    //注意，是className，不是class

    console.log(myNode.title);

    console.log("------------");

    console.log(myNode["src"]);

    console.log(myNode["className"]); //注意，是className，不是class

    console.log(myNode["title"]);

</script>

</body>

　　方式二:(推荐):

元素节点.getAttribute('属性名称');

　　举例;

    console.log(myNode.getAttribute("src"));

    console.log(myNode.getAttribute("class"));   //注意是class，不是className

    console.log(myNode.getAttribute("title"));

　　方式一和方式二的区别在于:前者是直接操作标签,后者是把标签作为DOM节点.推荐方式2.

　　2.设置节点的属性值

　　方式一举例:(设置节点的属性值)

DOM 介绍的更多相关文章

  1. python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  2. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  3. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  4. DOM介绍

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  5. 虚拟DOM介绍

    [转自]:https://www.jianshu.com/p/616999666920 为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.web ...

  6. DOM介绍以及使用方法

    DOM的基本讲解 一.DOM (Document Object Model)文档对象模型 1.有属性有方法 var person = { name:'派大星', fav:function(){ } } ...

  7. Python自动化 【第十五篇】：CSS、JavaScript 和 Dom介绍

    本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 ...

  8. javascript中的DOM介绍（一）

    一.基础知识点 1.DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口) 2.DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作 3.IE浏览器中所有的DO ...

  9. 解析vue2.0的diff算法 虚拟DOM介绍

    react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快 ...

随机推荐

  1. js 简单模板引擎

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  2. Git ——Tool

    Git: 何为Git: Git 是一个可以实时记录文件变化.维护文件的安全的一个仓库! Git仓库是由** Linux 系统之父 Linus Torvalds ** 创建的一个开源 的软件!Githu ...

  3. Chat Group gym101775A(逆元，组合数)

    传送门:Chat Group(gym101775A) 题意:一个宿舍中又n个人,最少k(k >= 3)个人就可以建一个讨论组,问最多可以建多少个不同的讨论组. 思路:求组合数的和,因为涉及除法取 ...

  4. Spring 注解注入的几种方式（转）

    平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...

  5. 一次vue-cli 2.x项目打包优化经历（优化xlsx插件）

    一.分析各模块打包后大小 用vue-cli创建的项目,已经集成 webpack-bundle-analyzer.详见文件 build/webpack.prod.conf.js,代码如下: if (co ...

  6. 7-15 QQ帐户的申请与登陆

    7-15 QQ帐户的申请与登陆(25 分) 实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤10​5​​),随后给 ...

  7. [TS-A1505] [清橙2013中国国家集训队第二次作业] 树 [可持久化线段树，求树上路径第k大]

    按Dfs序逐个插入点,建立可持久化线段树,每次查询即可,具体详见代码. 不知道为什么,代码慢的要死,, #include <iostream> #include <algorithm ...

  8. POJ 1376 Robot

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7866   Accepted: 2586 Description The R ...

  9. Javascript如何实现继承？

    前言 我这篇文章会误人子弟,我把继承跟构造函数实例化搞混了,汗!要想搞清楚JS的继承机制,看下大牛写的文章:http://www.cnblogs.com/dolphinX/p/3307903.html ...

  10. 百度地图API位置偏移的校准算法

    转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...