HTML DOM（即Document Object Model文档对象模型 ）（节点概念、获取节点、节点的属性）

最新推荐文章于 2022-03-20 08:20:55 发布
最新推荐文章于 2022-03-20 08:20:55 发布
阅读量369 收藏
点赞数
分类专栏： 前端-HTML、CSS、Javascript
DOM 是Document Object Model( 文档对象模型 )的缩写。 

DOM是把html里面的各种数据当作对象进行操作的一种思路。 

比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。

  • 节点概念
    DOM把所有的html都转换为节点 
    整个文档 是一个节点 
    元素 是节点 
    元素属性 是节点 
    元素内容 是节点 
    注释 也是节点 

    如本例 
    通过document.getElementById获取了id=d1的div标签对应的元素节点 
    然后通过attributes 获取了该节点对应的属性节点 
    接着通过childNodes获取了内容节点


    <html>
<body>
<div id="d1">hello HTML DOM</div>
  
</body>
  
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
  
</html>
  • HTML DOM 获取元素节点

    1.通过id获取元素节点
    在设计html的时候，一个元素对应的id应该是唯一的。 
    可以通过document.getElementById 获取某个元素对应的元素节点对象

    <html>
  
<div id="d1">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>

    2.通过标签名称获取元素节点
    所有的元素都有标签名 
    通过 getElementsByTagName 根据标签名称获取一个元素数组。

    <html>
   
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var  divs = document.getElementsByTagName("div");
 
for(i=0;i<divs.length;i++){
  document.write(divs[i]);
  document.write("<br>");
}
 
</script>
</html>

    3.通过类名获取元素节点
    与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组

    <html>
<h1  class="d" >hello javascript</h1>
<h2  class="d" >hello BOM</h2>
<div  class="d" >hello DOM</div>
<br>
<script>
var  elements= document.getElementsByClassName("d");
 
for(i=0;i<elements.length;i++){
  document.write(elements[i]);
  document.write("<br>");
}
 
</script>
</html>

    4.通过表单元素的name获取元素节点
    表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。

    <html>
用户名 <input name="userName"> <br>
密码  <input name="userPassword">
<br>
<script>
var  elements= document.getElementsByName("userName");
  
for(i=0;i<elements.length;i++){
  document.write(elements[i]);
  document.write("<br>");
}
  
</script>
</html>

    5.为什么会获取不到?
    参考本例代码，和通过id获取元素节点同样的代码 document.getElementById却无法获取元素节点。 
    这是因为javascript是解释语言，是顺序执行的。 在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。

    <html>
  
<script>
var  div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
 
<div id="d1">hello HTML DOM</div>

    6.获取属性节点
    首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
    因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue
    如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as["id"]取出名称是id的属性
    as["id"].nodeValue
    注: nodeName和nodeValue表示一个节点的名称和值

    <html>
   
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
 
</script>
</html>

    7.获取内容节点
    首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。
    然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
    注: nodeName和nodeValue表示一个节点的名称和值

    <html>
    
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
 
</script>
</html>
  • HTML DOM 获取元素节点的属性

    1.节点名称
    nodeName表示一个节点的名字
    如本例：
    document.nodeName 文档的节点名，是 固定的#document
    div1.nodeName 元素的节点名，是对应的标签名 div
    div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
    div1.childNodes[0].nodeName 内容的节点名，是固定的 #text

    <html>
  
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>

    2.节点值
    nodeValue表示一个节点的值
    如本例：
    document.nodeValue 文档的节点值，是 null
    div1.nodeValue 元素的节点值，是null
    div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
    div1.childNodes[0].nodeValue 内容的节点值，是内容

    <html>
   
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>

    3.节点类型
    nodeType表示一个节点的值
    不同的节点类型，对应的节点类型值是不一样的
    如本例：
    document.nodeType 文档的节点类型，是 9
    div1.nodeType 元素的节点类型，是 1
    div1.attributes[0].nodeType 属性的节点类型，是 2
    div1.childNodes[0].nodeType 内容的节点类型，是 3


    <html>
    
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>
</html>

    4.元素的文本内容
    修改与获取内容的值可以通过 childNodes[0].nodeValue进行 
    还有个简便办法就是通过innerHTML进行。 效果是一样的。
    <html>
    
<div id="d1">hello HTML DOM</div>
<script>
 
function changeDiv1(){
  document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
  document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
 
<button οnclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button οnclick="changeDiv2()">通过innerHTML改变div的内容</button>
 
</html>

    5.元素上的属性
    元素上的属性，比如id,value 可以通过 . 直接访问
    如果是自定义属性，那么可以通过如下两种方式来获取
    getAttribute("test")
attributes["test"].nodeValue
    注: class需要通过className获取
    <html>
    
<div id="d1">hello HTML DOM</div>
 
<script>
 
function get(){
 
  var input1 = document.getElementById("input1");
  var s = "id="+input1.id + "<br>";
  s += "value="+input1.value + "<br>";
  s += "class="+input1.className + "<br>";
  s += "test="+input1.getAttribute("test")+ "<br>";
  s += "test="+input1.attributes["test"].nodeValue+ "<br>";
 
  document.getElementById("d1").innerHTML= s;
}
</script>
 
<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button οnclick="get()">获取input的属性</button>
 
<div style="height:30px"></div>
</html>
litengbin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html DOM（Document Object Model）
__盛某人的博客
01-27 157
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有...
HTML DOM 之 DOM对象：Document Object Model (文档对象模型)
weixin_42472048的博客
06-22 353
思维导图   HTML DOM 简介 HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。 在继续学习之前，您需要对下面的知识有基本的了解： HTML / XHTML JavaScript 什么是 DOM？ 通过 JavaScript，您可以重构整...
前端基础-文档对象模型 (DOM)
逍遥云恋
03-26 573
第1章 文档对象模型 (DOM) 1.1 基本概念 DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。 它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。 浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点， 再由这些节点组成一个树状结构(DOM Tree)。 所有的...
HTML DOM(Document Object Model)学习初步
breakingice的专栏
07-20 448
DOM是W3C的一种标准。
DOM 文档对象模型 节点
qq_44035889的博客
08-02 247
DOM 是 Document Object Model（文档对象模型）的缩写。
DOM（document object model）文档对象模型
最新发布
10-12
本文概述DOM分类,document的方法以及属性、element的方法和属性document获取全局内容和创建全局内容，其中包括了节点属性和节点的相关方法和分类，本文结尾拓展了操作节点的方法和删除空文本节点的相关方法
什么是DOM(Document Object Model)文档对象模型
09-05
文档对象模型（DOM，Document Object Model）是针对HTML和XML文档的一种应用编程接口（API），它以树状结构的形式表示整个文档，为程序员提供了动态地访问和修改文档内容、结构和样式的手段。当浏览器加载页面时，它...
javascript-manipulation-of-the-dom-document-object-Model:Dom文档对象模型课程的Java语言操作
03-30
JavaScript DOM（Document Object Model）文档对象模型是Web开发中的核心概念，它允许开发者通过JavaScript来操纵HTML或XML文档的结构、内容和样式。本课程主要关注JavaScript如何与DOM交互，特别是使用Java语言进行...
document节点对象的获取方式示例介绍
09-04
在网页的DOM（Document Object Model）中，`document`对象是一个非常重要的节点，它代表了整个HTML或XML文档。操作`document`对象可以让我们访问和修改网页内容、样式以及交互功能。以下是一些获取`document`节点...
jacascript DOM节点——元素节点、属性节点、文本节点
08-30
JavaScript DOM（Document Object Model）是Web开发中用于操作HTML或XML文档的一种标准接口。它将文档结构转换为一个树形结构，使得我们可以通过JavaScript来访问和修改文档中的各个部分。DOM节点是这个树形结构的...
js操作文档对象的节点
weixin_30628077的博客
02-25 87
好吧，为了能让大家不至于睡着，我们先回顾先前面的东东吧~ 1.首先我们写了javaScriput的是一门弱类型的解释性的脚本语言：弱类型：我们的变量不用申明其具体的数据类型，在使用的时候浏览器根据其存放的值来自动识别 解...
文档对象(节点)的属性
weixin_30653097的博客
03-06 208
obj=document.getElementById('id_name'); obj.cloneNode(true)----复制节点 obj.getAttribute('border')----获得table的border属性 obj.setAttribute('border',3)----设置table的border属性 obj.removeAttribute('border')---...
JavaScriptDom（文档对象模型）节点对象以及属性
weixin_44391671的博客
01-16 205
**//childNodes 获取当前元素节点的所有子节点 ** var o=document.getElementById('box'); var o1=o.childNodes; console.log(o1) //控制台显示div中的所有子节点，换行也属于节点（文本节点） console.log(o1.length) //显示节点的个数 //通过找到的节点能修改内容 ...
html dom object对象,HTML DOM (document对象)
weixin_31755877的博客
06-18 481
HTML DOM 可通过 JavaScript 进行访问。Document 对象可以对 HTML 页面中的所有元素进行访问。document对象属性属性描述head提供对 元素的直接访问。document.headbody提供对 元素的直接访问。document.bodycookie设置或返回与当前文档有关的所有 cookie。document.cookiedomain返回当前文档的域名。d...
JS_DOM文档对象模型（节点篇）
weixin_57762552的博客
03-20 308
想要知道什么是节点，首先要知道什么是DOM，DOM全称Document Object Model文档对象模型，JS中通过DOM来对HTML文档进行操作。 文档对象模型可以拆开三份进行理解，文档表示的就是整个HTML网页文档、对象表示的是将网页中的每一个部分都转换为了一个对象、模型表示的是使用模型来表示对象之间的关系。 在文档对象模型中最重要的就是“节点”，节点(Node)是构成网页的最基本的组成部分也是构成HTML文档最基本的单元。在网页中的每一个部分都可以称为是一个节点，比如：html标签、属
JavaScript文档对象模型【节点是什么，查找改变元素，增加删除节点】
略懂一点的少年的博客
05-17 137
一，DOM（Document Object Model，文档对象模型） HTML的标签=HTML的元素=节点=对象 1，DOM的作用：查看节点，创建节点，增加节点，删除节点，替换节点 2，有一些什么节点 1)整个文档是一个文档节点 2）每一个HTML标签是一个元素节点 3）包含在HTML元素的文本是文本节点 4）注释叫注释节点 3，document对象 的常用属性 1）bgColor 页面的背景颜色 2）fgColor 文本的颜色 3）title 页面标题 4，document对象查找HTML元素
Dom即document，是指显示网页内容的部分，也就是这一块：
m0_56658148的博客
05-13 201
有三种方式来获取其中的元素，反别是 getElementById, getElementsByTagName, getElementsByName dom-获取文档中的元素
dom 节点（文档对象模型）详细介绍
寻寻觅觅的专栏
06-28 669
DOM节点信息包括节点类型（nodeType）、节点名称（nodeName）和节点值（nodeValue）。 节点类型 DOM节点中，每个节点都拥有不同的类型。 W3C规范中常用的 DOM节点类型有以下几种： 节点类型 说明 值 元素节点 每一个HTML标签都是一个元素节点，如 、 、等 1 属性节点 元素节点（HTML标签）的属性，如 id
DOM(文档对象模型)--1获取节点、节点的增删改
Dragon_Dai_2017的博客
08-31 561
HTML DOM 节点 在 HTML DOM （文档对象模型）中，每个部分都是节点： 1.文档本身是文档节点  2所有 HTML 元素是元素节点 3所有 HTML 属性是属性节点 4HTML 元素内的文本是文本节点 5注释是注释节点 1. 每个节点有三个固定属性:节点名称(nodeName),节点类型(nodeType),节点值(nodeValue)
理解DOM：文档对象模型详解
DOM文档对象模型（Document Object Model）是网页内容的结构化表示，它提供了一种标准的接口，允许程序员和脚本语言（如JavaScript）来解析、修改和操作HTML或XML文档。DOM是W3C（World Wide Web Consortium）制定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值