安科网

DOM编程系列之Document对象个人分享

gjcxywwx

gjcxywwx

2019-06-28

关注 关注

DOM

Document对象是什么

  • 在DOM里document对象可以代表页面
  • document对象可以得到HTML页面全部内容
  • document对象的原型是指向Node的

示例代码:

<script>
    /*
        document对象
          * DOM预定义 - 已经被创建完毕了 - 允许直接使用
          * 得到的是HTML页面的源代码 - 该对象表示当前HTML页面
     */
    console.log(document);
    // 利用instanceof来判断document是否是一个对象
    console.log(document instanceof Object);// 调用结果为true 表示document是一个JavaScript对象
    // document对象的属性和方法被定义在原型上
    console.log(Document.prototype);
    /*
        使用构造函数的方法创建一个对象
          * 原因 - DOM底层已经编写好了所以不需要我们再去创建了可以直接使用
     */
    var document = new Document();
    console.log(document);
</script>

Document对象的继承链

<script>
    // 利用instanceof判断Document.prototype(对象原型)是否继承于Node
    console.log(Document.prototype instanceof Node);// 调用结果为 true所以document对象是继承于Node的
     // node对象是继承于EventTarget的  (EventTarget目标时间的意思)
    console.log(Node.prototype instanceof EventTarget);

    console.log(Document.prototype instanceof EventTarget);
    // DOM中的对象之间的继承关系远比语法中的继承关系复杂
    console.log(Document.prototype instanceof HTMLDocument);
</script>

getElementById()方法

  • 以查找ID属性的方式来定位指定元素的位置
  • 使用getElementById()方法只能查找到一个元素,因为ID属性是唯一的不能重复

示例代码:

<body>
<button id="btn">哒哒哒</button>
<div id="d1"></div>
<script>
    // 1. 通过Document对象的getElementById()方法定义元素
    var buttonElement = document.getElementById('btn');
    /*
        * 打印测试的结果 - 是对应元素的HTML代码
        * DOM无论是使用的还是得到的都应该是对象
     */
    console.log(buttonElement instanceof Object);// 调用结果为 true
    /*
        DOM提供了一系列的对象 - 对应HTML页面的每一个元素
          * <button> 元素对应具有HTMLButtonElement对象
          * <div> 元素对应具有HTMLDivElement对象
     */
    console.log(buttonElement instanceof HTMLButtonElement);// 调用结果为 true

    var d1 = document.getElementById('d1');
    console.log(d1 instanceof HTMLDivElement);// 调用结果为 true
</script>
</body>

getElementsByName()方法

  • name属性不是唯一 - 得到的结果可能是多个,也可能是一个
  • 会得到全部带有 name属性 的元素，以类数组表示得到的元素（NodeList类型)

示例代码:

<body>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<script>
    // name属性不是唯一 - 得到的结果可能是多个,也可能是一个
    var buttonElements = document.getElementsByName('btns');
    /*
        NodeList集合 - 类数组对象
          * 得到每一个对应元素的话 - 通过索引值
     */
    // 通过索引值得到指定的name属性
    console.log(buttonElements[4]);
    // 判断buttonElements是否是节点列表
    console.log(buttonElements instanceof NodeList);// 调用结果为 true
</script>
</body>

getElementsByClassName()方法

  • 使用class属性的值来查找指定元素的位置
  • 会得到全部带有 class属性 的元素，以类数组表示得到的元素（HTMLCollection类型）

示例代码:

<body>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<script>
    var buttens = document.getElementsByClassName('btns');

    /*
    getElementsByClassName()方法
     * 以查找 class属性值 的方式来定位指定元素的位置
     * 会得到全部带有 class属性 的元素，以类数组表示得到的元素（ HTMLCollection类型 ）
    */

    console.log(buttens);
</script>

querySelector()方法与querySelectorAll()方法

  • querySelector()方法 - 返回的是第一个匹配的元素
  • querySelectorAll()方法 - 返回的NodeList集合

示例代码:

<body>
<button id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    // 该方法返回的是第一个匹配的元素
    var buttons = document.querySelector('#btn');
    console.log(buttons);

    var buttons1 = document.querySelector('.btns');
    console.log(buttons1);

    // querySelectorAll()方法返回的NodeList集合
    var buttons2 = document.querySelectorAll('btns');
    console.log(buttons2);
</script>
</body>

NodeList集合

  • 动态集合与静态集合

    • 动态集合(HTMLCollection) - 根据HTML元素变化而变化

      • 该集合的length属性值是变化的 - 影响后续的操作

    • 静态集合(NodeList) - 不会根据HTML元素变化而变化

      • 如果执行删除操作 - 该集合中可能存在已不存在的元素

示例代码:

<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    /*
        动态集合与静态集合
        * 动态集合(HTMLCollection) - 根据HTML元素变化而变化
          * 该集合的length属性值是变化的 - 影响后续的操作
        * 静态集合(NodeList) - 不会根据HTML元素变化而变化
          * 如果执行删除操作 - 该集合中可能存在已不存在的元素
     */
    var btnElements = document.getElementsByClassName('btns');
    console.log(btnElements);// HTMLCollection

    /* 打印当前集合的长度
    console.log(btnElements.length);// 5
    // 删除当前集合中某个元素
    var btn = document.getElementById('btn');
    var body = document.body;
    body.removeChild(btn);
    // 再一次打印当前集合的长度
    console.log(btnElements.length);// 4
    */

    var buttonElements = document.querySelectorAll('.btns');
    console.log(buttonElements);// NodeList

    // 打印当前集合的长度
    console.log(buttonElements.length);// 5
    // 删除当前集合中某个元素
    var btn = document.getElementById('btn');
    var body = document.body;
    body.removeChild(btn);
    // 再一次打印当前集合的长度
    console.log(buttonElements.length);// 5
</script>
</body>

创建元素节点

  • 用于创建新的元素节点

示例代码:

<script>
    // 1.创建<button></button>元素
    var btn = document.createElement('button');
    // 2.获取<body>元素
    var body = document.body;
    // 3.向<body>元素添加子节点
    body.appendChild(btn);

</script>

创建文本节点

  • 用于创建新的文本节点

示例代码:

<script>
    // 创建<button></button>元素
    var btn = document.createElement('button');

    /*
         创建文本节点
         为新创建的元素节点添加文本节点
     */
    var textNode = document.createTextNode('按钮');
    /*
        向<button>元素添加子节点
        
     */
    btn.appendChild(textNode);

    // 获取<body>元素
    var body = document.body;
    /*
        向<body>元素添加子节点
        将创建的文本节点添加到指定的元素节点中 - 通过appendChild()方法进行添加
     */
    body.appendChild(btn);

</script>
</body>

创建属性节点

  • 用于创建属性节点
  • 注意 - 该方法只能接收一个参数，做为属性节点的属性名，属性值使用 nodeValue 创建

示例代码:

<body>
<script>
    // 创建<button></button>元素
    var btn = document.createElement('button');

    /*
        创建文本节点 - 为新创建的元素节点添加文本节点
     */
    var textNode = document.createTextNode('按钮');
    // 向<button>元素添加子节点
    btn.appendChild(textNode);

    // 创建属性节点 - 为新创建的元素节点添加属性节点
    var attrNode = document.createAttribute('id');
    // 为属性节点设置值
    attrNode.nodeValue = 'btn';
    // 为<button>元素设置属性节点
    btn.setAttributeNode(attrNode);

    // 获取<body>元素
    var body = document.body;
    // 向<body>元素添加子节点
    body.appendChild(btn);

</script>
</body>

instanceof dom dom对象

gjcxywwx

gjcxywwx

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

聊聊Elasticsearch的TimedRunnable

* Return the time since this task was created until it finished running.* If the task is still running or has not yet been run,

qingmoucsdn 2019-11-17

JavaScript 中的 instanceof 方法

<script> var s="hello"; var i=8;// typeof 只能判断基本数据类型; alert; alert;

ThinkingLink 2019-10-30

JavaScript面试题总结系列（三）

indexOf / lastIndexOf：查找数组项，返回对应的下标。reduce / reduceRight：两两执行，prev 为上次化简函数的return值，cur为当前值。constructor属性返回对创建此对象的数组函数的引用，就是返回对象相

ThinkingLink 2019-10-23

判断字符串是不是JSONObject 或 JSONArray

Object json = new JSONTokener(jsonValue).nextValue();return false;return true;

linglongbayinhe 2016-11-17

memcached 不同客户端存取值问题

本人接触memcached不多，希望下面的问题能帮助到遇到同样问题的同学，作为个人日记记录一下。昨天调试memcached发现，在手机端存进去的值，java端没取到。一般我们只关注key和value，发现并无问题；然后好好看了下flags。查源码发现cmd

82463165 2014-05-27

从Vue源码学习JavaScript之this instanceof Vue

}这里通过this instanceof Vue来判断有没有用new关键词调用，为什么可以这么判断？我们分别了解一下this和instanceof的用法。this在 JavaScript 中，this 是动态绑定，或称为运行期绑定的，它可以是全局对象、当前

gavinvong 2019-07-01

如何理解JavaScript的原型和原型链？

JavaScript的特点JavaScript是一门直译式脚本语言，是一种动态类型、基于原型的语言。不同于Java、C#等面向对象语言，JavaScript采用基于原型的继承方式。那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。图中给出了Obje

pdw00 2019-07-01

春招季如何横扫 Javascript 面试核心考点(基础版)？

引言Javascript是前端面试的重点，本文重点梳理下 Javascript 中的常考知识点，然后就一些容易出现的题目进行解析。限于文章的篇幅，无法将知识点讲解的面面俱到，本文只罗列了一些重难点，如果想要了解更多内容欢迎点击我的博客。其中基本数据类型包括

JavaJspSsh 2019-07-01

前端面试题 -- JavaScript (一)

前言前两天总结了一下HTML+CSS方面的面试题 (传送门)，今天翻看了一些 JavaScript 面试中常见的几个问题，分享给有需要的小伙伴，欢迎star关注。符号类型是唯一的并且是不可修改的引用类型：Object. toString: Object 的

西门吹雪 2019-07-01

JavaScript 三种方法，可以确定一个值到底是什么类型

JavaScript 三种方法，可以确定一个值到底是什么类型。只有确定类型的情况，才知道当前操作对象拥有哪些功能; 比如使用 push，unshfit，shfit 等方法时，那么其必须为数组类型时才能正确使用；当某些情况添加类型检查时，这样代码更加健壮，安

fuziwang 2019-06-29

mybatis分页实现

最近开始尝试用mybatis,比较郁闷其对分页的实现，看了网上一些例子，还是不满意。最好的应该是rapid-framework里的实现了，但没实现分页参数的参数化，参数都是硬编码在sql里，在oracle这样的数据库里，性能影响还是有的。下面是我的实现，但

jacklife 2013-06-28

关于javascript中类型判断的那些疑惑

"object"使用构造函数创建的变量，使用typeof判断会返回“object”结果，但是Function函数例外，由它创建的变量typeof返回的是“function”。接着就来说说typeof null == "obje

xxjoy 2019-06-28

【JavaScript】DOM之Document对象

Document对象是DOM的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法通过conslie。log()方法来Document对象打印，测试该对象的属性和方法。</body>getElementsByName()方法name是参

yhunii 2019-06-28

我与DOM的第一次邂逅

DOMDOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”。节点DOM 的最小组成单位叫做节点。文档的树形结构，就是由各种不同类型的节点组成。节点树一个文档的所有节点，按照所在的层级，类似树状结构 它有一个顶层节点，下一层都是顶层节点的

DolphinThinker 2019-06-28

单例模式的理解【php】

作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。为什么要使用单例模式1、PHP语言本身的局限性PHP语言是一种解释型的脚本语言，这种运行机制使得每个PHP页面被解释执行后，所有的相关资源都会被回收。

Phplayers 2019-06-28

JavaScript面向对象编程——Array类型

概述一维数组数组是一个有序的数据集合，可以通过数组名称和索引进行访问。JavaScript中并没有明确的数组数据类型。二维数组数组是可以嵌套的，这就意味着一个数组可以作为一个袁旭被包含在另一个数组里面。利用JavaScript这个特点，创建二维数组，即数组

js网页特效 2019-06-28

JavaScript面向对象中的Function类型个人分享

Function类型Function与函数的概念函数这样的一段JavaScript代码,它只定义一次,但是可能被执行或调用多次Function类型是JavaScript提供的引用类型之一,通过Function类型创建Function对象在JavaScrip

Eric实验室 2019-06-28

JavaScript...Function类型...

Function类型Function与函数函数是这样一段JavaScript代码 它只定义一次 但可能被执行或调用多次Function类型是JavaScript提供的引用类型之一 通过Function类型创建Function对象在JavaScript中 函

zzrshuiwuhen 2019-06-28

JavaScript面向对象编程——Function类型

Function类型Function与函数函数它只定义一次，但可能被执行或调用多次 。在JavaScript中，函数也是以对象的形式存在的。函数名，本质就是一个变量名，是指向某个Function对象的引用。目前，定义函数具有三种方式，这三种方式之间存在一定

王甲评 2019-06-28

转 Javascript中判断数组的正确姿势

在 Javascript 中，如何判断一个变量是否是数组？console.log; // true但是鉴于低版本 IE 不支持 ES5，如需兼容，需要想想别的办法。我们都知道，数组是特殊的对象，所以数组的 typeof 结果也是 object，而因为 nu

cithegod 2016-01-19
gjcxywwx

gjcxywwx

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号