精华内容
下载资源
问答
  • DOM的含义:DOM称为文件对象模型(DocumentObjectModel,简称DOM),W3C组织推荐处理可扩展置标语言标准编程接口DOM是HTML文档内存对象表示,它提供了使用JavaScript与网页交互方式。DOM是节点的层次结构...

    4ea573338c21979588ccd80a44f036c1.png

    DOM的含义:

    DOM称为文件对象模型(DocumentObjectModel,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口

    DOM是HTML文档的内存中对象表示,它提供了使用JavaScript与网页交互的方式。DOM是节点的层次结构(或树),其中document节点作为根。

    实际上DOM是以面向对象的方式来描述的文档模型。DOM定义了表示和修改文档所需的对象和这些对象的行为和属性以及这些对象之间的关系。

    通过JavaScript,我们可以重构整个HTML文档。比如添加、移除、改变或重排页面上的项目。

    要改变页面上的某个东西,JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移

    动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)

    例:

    在JavaScript中获取元素内容最简单的方法就是通过innerHTML 属性来获取,所以在以下案例中我们可以通过innerHTML来获取元素的文本内容

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    Document

    Hello World!

    var demo=document.getElementById("demo").innerHTML;

    document.write(demo);

    效果图:

    07245e20626585c1d8a1ff3bd5bae3af.png

    总结:以上就是本篇文章的全部内容了,希望对大家学习DOM属性有所帮助。

    本文转载自中文网

    展开全文
  • DOM节点层次

    2020-09-22 16:15:39
    什么DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。...文档节点是每个文档的根节点。文档元素是文档的外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个

    什么是DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点数,允许开发人员添加、移除和修改页面的某一部分。

    什么是节点层次

    节点分为几种不同的类型,每种类型分别表示文档中不同的信息或标识。每个节点都拥有各自的特点、数据和方法,另外与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为以特定节点为根节点的树形结构。

    文档节点是每个文档的根节点。文档元素是文档的外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 页面中,文档元素始终都是元素。

    每一段标记都可以通过树中的一个节点来表示:HTML 元素通过元素节点表示,特性(attribute) 通过特性节点表示,文档类型通过文档类型节点表示,而注释则通过注释节点表示。总共有 12 种节点类型,这些类型都继承自一个基类型。

    例如:

    <html>
         <head>
             <title>Sample Page</title>
         </head>     
          <body>        
              <p>Hello World!</p>     
          </body> 
    </html>
    

    在这里插入图片描述

    展开全文
  • DOM采用的树形结构,一个个树枝的形式来表示页面中的每个元素 如上图 DOM的树形结构也叫“DOM树” 在这棵树上,HTML元素树根,也叫元素 这棵树上的head和body位于同一层次上,有着共同的父节点html),所以...

    DOM小菜宝典

    在这里插入图片描述

    什么是DOM?

    DOM,全称是“Document Object Model(文档对象模型) ,它是由W3C定义的一个标准

    在这里插入图片描述

    DOM结构

    DOM采用的是树形结构,一个个树枝的形式来表示页面中的每个元素
    在这里插入图片描述

    如上图
    DOM的树形结构也叫“DOM树”

    在这棵树上,HTML元素是树根,也叫根元素

    这棵树上的headbody位于同一层次上,有着共同的父节点(html),所以head和body是兄弟节点

    head有子节点,body也有子节点,如上以此类推,如果还有下一层,我们还可以继续找下去
    在这里插入图片描述

    常见的节点类型

    在js中,节点分为很多类型,DOM节点有12种,但是常见的只有3种(其它的可以作为了解,不需掌握)

    1—>元素节点—>(红色线箭头)

    2—>属性节点—>attribute(绿色线箭头)

    3—>文本节点—>text(紫色线箭头)

    <div id="box">啊哈哈哈哈</div>
    
    

    在这里插入图片描述

    获取元素节点

    在一个页面中,我们想要对某个元素进行操作,就必须通过一定的方式获取到后,才能进行相应的操作

    在js中,我们可以通过一下六种方式来获取指定元素

    1. getElementById()
    2. getElementByClassName()
    3. getElementByTagName()
    4. getElementByName()
    5. querySelector()和 querySelectorAll()
    6. document.title和document.body

    注:区分大小写

    1 —getElementById(“id名”)

    例:<div id="box1">ooooo</div>

    var a=document.getElementById(“box1”);

    2—getElementByClassName(“class名”)

    例:<div class="box2">ooooo</div>

    var a=document.getElementByClass(“box2”);

    3—getElementByTagName(“标签名”)

    例:<div >ooooo</div>

    var a=document.getElementByTagName(“div”);

    4—getElementByName(“name名”)

    例:<input type="text" name="one">

    var a=document.getElementByName(“one”);

    5—querySelector()和 querySelectorAll(“指定选择器,获取全部)

    querySelecto()和 querySelectorAll是无法操作动态创建的元素

    例:<div class=” box“ id=” boxbox“>ooooo</div>

    var a=document.querySelector(".box");

    var b=document.querySelector("#boxbox");

    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    `<div  id="box1">ooooo</div>
    `<div  id="box1">ooooo</div>
    `<div  id="box1">ooooo</div>
    `<div  id="box1">ooooo</div>
    `<div  id="box1">ooooo</div>
    
    

    var d=document.querySelectorAll(" li ");//获取所有li

    var e=document.querySelectorAll(" #box1 ");
    //获取所有id为box1的元素

    6—>document.title和document.body

    因为页面只有一个title和body属性,所以专门提供了这两个方法

    在这里插入图片描述

    关于DOM这点小基础的分享就到这里,希望不明白的 小菜们看到后会有种恍然大明白的感觉

    展开全文
  • JavaScript中的DOM

    千次阅读 2017-04-07 16:18:12
    文档对象模型(DOM什么是DOMDOM是一种接口(API),利用这个接口我们可以方便地操作HTML和XML页面。 这个接口将HTML或者XML页面...所有页面标记表现为以某个节点为根节点的树形结构。 节点类型 文档存在

    文档对象模型(DOM)

    什么是DOM?DOM是一种接口(API),利用这个接口我们可以方便地操作HTML和XML页面。
    这个接口将HTML或者XML页面看成一个由多个层次节点构成的结构,文档是由一个个节点组成的。也就是说DOM的核心就是节点。
    每个节点都有自己的属性和方法,节点之间存在关系,这种关系就构成了层次。所有的页面标记表现为以某个节点为根节点的树形结构。

    节点类型

    文档中存在许许多多的节点,这些节点分别属于各种各样的类型。
    总共有12中类型的节点,但不是所有的都很常用。这12种类型的节点都继承自一个基本的类型节点:Node类型。
    如何区分这12种类型的节点呢?每个节点都有一个nodeType属性来标志自己是什么类型的节点。nodeType为1则是元素节点Element类型,为3则是文本节点Text类型等等。利用这个属性我们就可以得知节点的类型。
    不同的节点类型有不同的属性和方法,也有一些共有的属性和方法。接下来就是一个常用的节点类型。

    Node类型

    首先是最基本的Node类型,这可以看作是所有类型节点的共性,因为他们都是继承这个基本节点类型而来的。
    1.nodeName和nodeValue属性
    不同类型的节点这两个属性的值不同,因类型而异。如元素类型的nodeName则为元素的标签名,nodeValue值为null。

    2.节点关系
    节点之间不是独立存在的,他们之间有着这样或那样的联系。基本的关系有父子、同胞。不仅存在这些关系,而且DOM也为我们提供了可以利用这些关系的接口。最常用的每个节点都有一个childNodes属性,其指向一个NodeList对象。这个对象像数组一样有序保存着该节点的所有直接子节点。但是它有些特殊,它是一个“动态”的数组,这是说当该节点的子节点发生变化时,这个数组会自动跟着变化,它是动态查询的结果,不是一成不变的。
    利用childNodes属性可以得到子节点的NodeList,然后我们就可以通过这个NodeList来访问子节点了,可以用下标像数组一样访问,也可以用item(index)方法来访问。
    另外每个节点都有的一个属性是parentNode,指向该节点的父节点。还有nextSibling和previousSibling属性,指向该节点的后一个或前一个同胞节点,如果不存在则属性值为null。同时每个父节点也有firstChild和lastChild属性,指向子节点NodeList的第一项和最后一项,也有一个hasChildNodes()方法来判断是否有子节点。
    最后所有节点共有的一个属性是ownerDocument,指向可以表示这个节点所在文档的文档节点。

    我们可以看到,节点的大多数共有的属性都是用来表征节点之间的关系的。

    3.操作节点的方法。
    DOM不仅定义了节点的属性,也提供了操作节点的方法。
    首先是appendChild()最常用,可以在childNodes列表末尾追加一个节点。
    然后是insertBefore(),在childNodes列表指定节点之前插入一个节点。
    还有就是replaceChild()、removeChild()等方法。
    这些方法我们可以看到都是改变节点的childNodes列表。

    4.再有就是cloneNode()方法和 normalize()方法了。cloneNode()就是创建一个节点的副本,不过不会复制节点上已有的事件处理程序等其他JavaScript属性。normalize()方法唯一的作用是处理文本节点。

    Document类型

    一个节点是Document类型的节点则说明这个节点表示一个文档。
    我们常用的document对象就是HTMLDocument的一个实例,而HTMLDocument就是继承自Document类型。document的含义就是代表整个html文档。
    属性:
    document.documentElement 指向<html>元素和document.firstChild及document.childNodes[0]指向相同;
    document.body 指向<body>元素;
    document.title指向<title>元素;
    document.URL 页面的url
    document.domain 页面的域名
    document.referrer 链接到当前页面的页面url

    方法:
    document.getElementById();
    document.getElementsByTagName();
    document.write();
    要注意的是getElementsByTagName(),该函数会返回一个HTMLCollection对象,这是一个和NodeList类似的一个“动态”集合。除了可以用下标和item()方访问集合内的元素外,还可以通过namedItem()和按名称访问项。

    一些特殊集合:
    document.forms
    document.anchors

    Element类型

    属性:
    tagName,与nodeName相同返回标签名
    id
    title
    className因为class是保留字
    lang
    dir语言的方向值为ltr或rtl
    方法:
    每个元素都有一个或多个特性,用来提供元素的附加信息。如id,class,align,onclick等等。DOM提供了操作这些特性的方法
    getAttribute();
    setAttribute();
    removeAttribute();
    除了用以上操作元素特性的方法,DOM还提供了attributes属性来直接获得元素的所有特性,attributes属性包含一个NamedNodeMap,这也是一个“动态”集合。每个特性都是集合中的一个Attr节点。集合有以下方法来操作这些属性:
    getNamedItem();
    removeNamedItem();
    setNamedItem();
    item();
    一般来说我们不怎么用attributes属性,因为getAttribute()等方法就能满足我们的需求,但是在遍历元素所有特性的时候就用到attributes属性了。

    创建元素节点:document.createElement();

    Text类型

    属性:
    data与nodeValue相同,包含节点中的文本
    方法:
    appendData();
    deleteData();
    insertData();
    replaceData();
    splitText();
    substringData();
    当元素包含多个文本节点时,可以使用normalize()方法将多个文本节点合并成一个。

    创建文本节点:document.createTextNode();

    DocumentFragment类型

    文档片段类型,作用是当我们要往文档中增加多个节点时,一个一个增加则会导致每次增加完成文档都要重新渲染一次,我们就可以先将要增加的节点放在文档片段中,再一次性将文档片段加入到文档中。

    操作表格

    当我们想向表格中增加节点时一次次调用createElement()和appendChild()很麻烦,DOM为我们提供了可以更加方便地操作表格的方法
    tbody.insertRow(pos);
    tbody.rows[pos];
    rows[pos].insertCell(pos);
    rows[pos].cells[pos];

    理解“动态”集合

    NodeList、HTMLCollection、NamedNodeMap都是动态集合。也就是文档发生变化时集合内容也会跟着变。其实他们本质上都是动态查询文档的结果,也就是我们每次访问这些集合时都会查询一遍文档来得到这些集合。而这些查询肯定是特别消耗性能的,所以我们应该尽量避免访问这些集合。
    下面的例子会导致无限循环:

    var divs = document.getElementsByTagName("div");
    var i, div;
    
    for (i = 0; i < divs.length; i++) {
        div = document.createElement("div");
        document.body.appendChild(div);
    }

    我们的divs.length并不是不变的,每次我们访问这个属性就会去查询文档中所有的div来得到这个属性值,每次文档中都会增加一个div,也就是divs.length会一直增加导致无限循环。
    要解决这个问题我们只需要在循环开始前将divs.length赋值给另一个变量即可。

    展开全文
  • DOM就是文件对象模型,通过JavaScript代码对页面进行重构从而增强与页面交互性 本篇文章将要分享的是有关DOM的含义介绍...DOM是节点的层次结构(或树),其中document节点作为。 实际上DOM是以面向对象方式来描述
  • DOM

    2020-06-16 10:46:44
    什么是DOM 一套规范文档内容的通用型标准 DOM HTML节点树 DOM HTML指的是DOM中为操作HTML文档提供的属性和方法,其中,文档(document)表示HTML文件...(1)根节点:标签整个文档的根节点有且仅由一个 (2) 子节点:指
  • DOM基础

    2021-01-21 21:24:22
    DOM基础 什么DOM DOM (Document Object Model:文档对象模型):是HTML和XML文档编程接口,定义了访问和操作HTML和XML文档标准...同胞节点是拥有相同父节点节点,也叫兄弟节点 节点分类(nodeType) 元素节
  • 掌握js的Dom

    2020-05-06 23:46:45
    其实网页所有HTML内容在内存中都保存在一棵树形结构上,内存这棵保存一个网页所有内容树形结构,就称为DOM树。 当浏览器扫描到一个.html文件,在将.html内容显示到浏览器窗口给人看之前,都会在内存...
  • DOM 简介

    2021-03-11 12:38:54
    什么是 DOM 文档对象模型(Document Object Model,简称DOM),W3C组织推荐的处理可扩展标记语言(html 或XML)的标准编程接口 DOM 树 文档:一个页面就是一个文档,DOM中使用 document 表示 元素:页面中的所有...
  • DOM Tree

    2018-11-07 15:51:00
    DOM Tree ...1、读到HTML的时候还没有度内容时候,先创建根节点对对象 2、开始顺序读取HTML文档内容,在创建子节点。 网页当中一切内容,都document树上节点对象。都对象。 转...
  • 注释:根节点包含其他子节点。 3、 示例,对于button绑定script代码 4、对代码注释和理解: 5、相同功能不同写法: 注释:这样写不好地方html和js代码,耦合起来了。 这样写法...
  • HTML DOM什么DOM?节点对象(Node)三大属性nodetype 节点类型nodeName 节点...在网页HTML的结构化文档都是以树形结构储存,每一个元素都是一个节点对象(Node),根节点是document对象。 节点对象(Node...
  • js第十章DOM

    2020-04-25 21:50:22
    什么是dom? Document Object Model(文档对象模型) 将html文档或者xml文档描绘成有节点层次结构,开发者可以通过操作节点来修改页面某一部分; 节点层次 文档根节点 Document 文档元素 html html只有一个...
  • DOM之nodeName与nodevalue

    2019-08-24 15:12:27
    DOM即Document Object Model直译为文档对象模型,文档节点是整个文档树的根节点,它是文档其他节点的父节点。DOMHTML文档表达为树结构,把整个HTML代码看作文档节点,包含一个文档类型节点和一个元素节点html。 ...
  • 什么是文档对象模型 个人学习笔记仅供参考,详细内容请参考MDN——原文链接. ...根节点:树中的顶部节点,对于HTML来说,它始终是HTML节点 子节点:直接在另一个节点内部的一个节点。 例如,在上面的示例中,IMG
  • javaScript与DOM对象

    2012-12-19 17:32:52
    [b]问题:[/b] DOM 是什么? 关于JAvascript [b]回答:[/b] ...DOM就是Document Object Model 文档...比如在javascript,网页作为一个具备DOM特性文档对象, HTML就是其根节点, 访问网页某个节点可以使用...
  • DOM学习笔记

    2007-10-22 10:44:00
    DOM 一.概述1. 什么DOMDOM(Document...在DOM模型,整个文档是一个树的结构,树的根节点是document对象,表示整个文档对象,并且它仅包含一个子节点。2.DOM模型的组成部分 核心、HTML、XML 核心部分包括了最底
  • DOM 一、什么DOM?...文档节点是每个文档的根节点,文档节点只有一个子节点——HTML元素(文档元素)。 在html页面,文档元素始终是html元素,在XML页面,由于没有预定义的元素,因此任何...
  • [JavaScript] DOM

    2012-09-14 20:26:34
    1. Node类型1.1 什么是DOMDOM是针对HTML和XML文档一个API,它描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面某一部分。节点分为几种不同类型,每种类型分别表示文档不同信息及标记,每个...
  • 这些节点中的每个节点都具有可以操纵的属性 CSS选择器 元素接口 不同的元素支持不同的属性。 这些属性只是对象。 键值对,您可以在其中重新分配值以更改节点。 您可以在原型链中查找元素,以了解每个节点(或构造...
  • JavaScript中的事件流模型:冒泡事件流:当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,直到DOM根节点 。捕获事件流:当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先...
  • 当一个HTML元素上产生一个事件时,该事件会在DOM元素节点与根节点之间按特定顺序传播,路径所经过节点都会收到该事件,这个传播过程就是DOM事件流。 我们再来看一看事件冒泡传递方向 总而言之,就是从下...
  • 1.JSX 和 Virtual DOM

    2020-11-26 23:43:25
    这个小节接着来实现将虚拟 DOM 转化为真实 DOM (页面上渲染的是真实 DOM)。 我们知道在 React ,将虚拟 DOM 转化为真实 DOM 使用 <code>ReactDOM.render</code> 实现,使用如下: <pre>...
  • 什么是回流和重绘

    2019-05-22 00:20:00
    浏览器会把获取的HTML代码解析成一个DOM树,html中的每一个元素都是DOM树的一个节点,根节点也就是我们常用的docunment对象  当渲染的时候遇到一部分或者全部因大小,隐藏,布局的等改变需要重新构建的时候,这...
  • 当一个HTML元素上产生一个事件时,该事件会在DOM元素节点与根节点之间按特定顺序传播,路径所经过节点都会收到该事件,这个传播过程就是DOM事件流。 JS冒泡事件:当一个元素上事件被触发时候,比如说...
  • 页面呈现流程   在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面怎么把html结合css等显示到浏览器上的,... 浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom中的1个节点
  • 我们都知道DOM是一个树状结构,在树状结构根节点、父节点、子节点、兄弟节点等概念。CSS也引入了这些概念到选择器,对应关系就是层次选择器。层次选择器共有四种,分别为: 后代选择器(E F) 子选择器(E&...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

dom中的根节点是什么html