javascript dom(document object model)的简单介绍

最新推荐文章于 2022-07-30 01:28:42 发布
最新推荐文章于 2022-07-30 01:28:42 发布
阅读量618 收藏
点赞数
文章标签： javascript object button function xhtml table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/byn10/article/details/7299877
版权
dom访问的几种方法
1、document.getElementById("对象的id");   id=""
      独立访问某个对象的时候使用
2、document.getElementsByName("对象的name");   name=""
      返回的是一个对象数组（节点的列表）

3、document.getElementsByTagName("标签名称");  a  p span div   

      返回的也是一个对象数组

我们使用document.all(获取网页中所有的对象)

注意：
1、在获取网页所有的对象时，第一个节点会获取一个“！”它是网页的w3c规范声明 
2、在获取table对象的时候，我们会获取到一个tbody节点，它是属于表格的。
我们可以使用document.all.id 获取指定id的对象
但是注意，如果我们获取的id有多个对象，则返回的是一个节点列表
可以通过document.all（下标）的方式获取网页对象
document.images 可以获取网页中所有的图片对象（节点）

下面是一个有点dom的小程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
    function getAll()
//获取所有的网页对象
  var a=document.all;
  var str="";   
  for(var i=0;i<a.length;i++){
       str+=a[i].tagName+"<br>";
  }
  document.write(str);
}

function getAllid(){
//获取所有的网页对象
  var a=document.all.p2;
  alert(a.length);
  alert(a.tagName);
}
</script>
</head>
<body>
<a href="#">东</a>
<a href="#">西</a>
<a href="#">南</a>
<a href="#">北</a>

<p id="p2">一</p>
<p>二</p>
<p name="p1">三</p>
<p>四</p>
<p name="p2">五</p>
<p name="p1">六</p>
<input type="button" value="获取网页所有的节点" οnclick="getAll()" />
<input type="button" value="获取网页中指定的id" οnclick="getAllid()" />
</body>
</html>

byn10
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于document.write
weixin_30851867的博客
08-21 1271
document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲...
DOM Scripting Web Design with JavaScript and the Document Object Model
09-05
英文第二版，pdf，高清， 涵盖HTML5内容。前端入门好书。
document.write()用法
細水、長流√的专栏
02-22 1万+
1.document.open() 功能：打开一个新文档，即打开一个流，并擦除当前文档的内容。 语法：document.open(mimetype,replace) 参数： mimetype：可选。规定正在写的文档的类型。默认值是”text/html”。 replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。 注1：open()方法将擦除当前HTML文档的内容，开始一个新的文档，新文档用write()方法或writeln()方法编写。 注2：调用open()方法打开一个新文档并且用wri
js文档对象模型(Document Object Model)
weixin_41545048的博客
07-13 509
一、JavaScript HTML DOM HTML DOM (文档对象模型)：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 1. HTML DOM 模型被构造为对象的树： 2.查找HTML元素： 通过 id 查找HTML 元素 document.getElementById("main"); 通过标签名查找 HTML 元素 document.getElementsByTagName("p"); 通过类名查找HTML 元素 document
JavaScript——DOM(Document Object Model)文档对象模型
weixin_45084986的博客
03-30 89
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> /* onload事件会在整个页面加载完成之后才触发 为wi ndow绑定-个onload事件 该事件对应的响应函数将会在页面加载完成之后执行， 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了 */ window.
什么是DOM(Document Object Model)文档对象模型
12-09
D:document 文档 浏览器加载的页面 DOM O:object ... 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关
DOM Scripting Web Design JavaScript and the Document Object Model (2nd)
11-19
JavaScript Dom 编程艺术，第二版，英文版。学习JavaScript的经典教材
javascript(三)DOM（Document Object Model） 对象
feicongcong的博客
04-12 285
1.Document 对象当浏览器载入 HTML 文档, 它就会成为 document 对象。document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。2....
javaScript之DOM（document object model）节点
Wind_waving的博客
02-25 246
DOM节点属性 属性 描述 nodeName 节点名称 nodeValue 节点值，通常只用于文本节点 nodeType 节点类型的数字，数字值如下表 parentNode 双亲节点 childNodes 子节点列表 firstChild、lastChild 第一个、最后一个子节点 previousSibling、ne...
document.write()详解
qq_43383323的博客
10-19 1万+
原博客：https://blog.csdn.net/wei_ke_zhi/article/details/82153778 一、document.write()运行原理 首先我们先了解一下这条语句运行的原理： document.write()是Javascript中对document.open()所开启的文档流操作的API方法。 它能够直接砸文档流中写入字符串，一旦文档流已经关闭，那么 document.write()就会重新运用document.open()打开新的文档流并写入，此时原来的文档流会被清.
JavaScript Document Object Model （DOM）文档对象模型 元素节点属性
chengqingshihuishui的博客
09-03 304
一、DOM模型 DOM全称是文档对象模型。就是把html\xml等文档的标签，属性，文本，转换成为对象来管理。 1、Document对象 Document代表整个文档。 <html lang="zn_ch"> <head> <title>My title</title> </head> <body> <a href="http://www.baidu.com">My link</a> <...
学习笔记—document write( )语法、功能、以及需要注意的‘坑’
热门推荐
jzsn2018
04-21 3万+
语法：document.write(exp1,exp2,exp3,....)参数解析：（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。(如果写入多个参数的话，这些参数会自动换行显示)  (2)这里的参数可以是变量，也可以是函数体、函数自执行体，数字等等，也可以进行一些简单的运算  (3)参数支持标签属性，写入的时候会按照html进行解析，但是需要用字符串的形式(常用...
浅析DOM【Document Object Model（文档对象模型）】
胡振涛
03-04 1774
这两天学习JS的时候接触了几次DOM，那么今天有接触了DOM，而且是主要讲授关于DOM的知识，那么什么是DOM呢？ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。目的是为了能让js操作ht...
深入浅出JavaScript （五） 详解Document.write()方法
weixin_33759269的博客
01-23 706
一直用document.write()方法向浏览器中显示数据用，把它当做Alert()使用， 看来这样用有些大材小用了，下面说说它的主要用处。 document.write()方法可以用在两个方面： 1.页面载入过程中，用脚本加入新的页面内容。 2.用延时脚本创建本窗口或新窗口的内容。 该方法...
文档对象模型（Document Object Model--DOM）
ambkn80466的专栏
08-22 89
文档对象模型（Document Object Model--DOM） 1.DOM a)允许脚本和程序动态读取和更新文档内容、结构和样式的语言和平台 b)使用DOM操作HTML页面可以不用每次从服务器传输整个页面 c)DOM是针对HTML和XML的而应用程序接口 2.DOM结构 　　a)DOM的树形结构 i.文档中的所有元素都是树的节点 ii.每个节点都是Node对...
JavaScript——Document Object Model
胖虎虎
07-30 258
DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。 DOM和BOM的区别：函数模板 通过点击按钮框绑定一个事件 获取事件id的事件，在这个事件中获取单机按钮框的事件 而且document.write(“输出语句”); 相当于java的system.out.println();1.通过点击按钮框获取value值 2.将第一个文本框中的value赋值到第二个文本框上 3.失去焦点对象获取value值，通过this指针 6.
JavaScript中阶 DOM 文档对象模型 (Document Object Model)
weixin_65257540的博客
03-03 78
是W3C为HTML文档提供的一个API（应用程序接口） API提供了对HTML中的元素、属性、文本的一系列属性、操作的方法，满足动态化文档的需求（让HTML提供接口给JS，让JS去操控HTML） DOM节点（node） HTML文档中的文档、标签、属性、文本、注释等都成为node节点(元素节点、属性节点、文本节点) 节点分类 元素节点、属性节点、文本节点 属性节点不是子节点 节点属性 节点类型 node name node type node value 元
JavaScript中document的write()的一个使用细节
weixin_43729854的博客
04-07 1933
最近在做一个微信小程序，之中用到了html,CSS,JS这些方面的知识，我一直觉得前端很好玩，就开始学习JS方面的知识。 因为是初学，直接很全面地概括JS目前做不到，我就把学习中的点滴与大家分享。 这里谈一下Java Script中document.write()的一个使用细节: 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。 直接举例说...
document object model
最新发布
05-12
文档对象模型（Document Object Model，简称DOM）是一种基于XML的文档结构表示方法，它把整个文档抽象成一个树形结构，每个节点都是一个对象，可以通过操作这些对象来改变文档的显示和内容。DOM提供了一种独立于平台...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值