dom对象详解-document对象

已于 2023-06-07 01:59:17 修改
阅读量1k 收藏 3
点赞数 1
分类专栏： js 文章标签： javascript linq webview
于 2022-02-23 12:50:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014163736/article/details/123087448
版权
  1. dom对象详解-document对象

dom编程最重要的一个对象

最复杂的

document对象代表的是整个html文档，因此可以访问到文档中的各个对象（元素）。

是学习dom编程的一个最关键所在

  1. 常用函数

  1. write() 

这个是向文档输出文本或是js代码

  1. writeln（）
  • 这个也 是向文档输出文本或是js代码，
  • 不同的是多一个换行符。但是实际上对于浏览器来说，输出效果并没有区别。
  • 可在每个表达式后写一个换行符

  1. getElementById()
  1. 规定html文档中 id 号要唯一，
  2. 如果不唯一，则只取第一个元素

2. id号不要用数字开头，

案例：

<html>

<head>

<script language="javascript">  

  

function test()

{

var myhref=document.getElementById("a1");

其实它只找一个，只找第一个，找到第一个后就返回了，不往后执行了

window.alert(myhref);

}

</script>

 

</head>

<body>

<!-- 故意定义了三个id号相同的超链接 -->

<a id="a1" href="http://www.baidu.com">连接到baidu</a>

<a id="a1" href="http://www.sina.com">连接到sohu</a>

<a id="a1" href="http://www.163.com">连接到163</a>

<input type="button" value="test1" οnclick="test();"/>

</body>

</html>

  1. getElementsByName()  
  • 注意是Elements 不是 Element
  • 复选框，要求id号一样，getElementById()就不好用了
  • 通过getElementByName()返回对象集合
  • 集合中规模也是length，这点和Java不同

案例：

<html>

<head>

<script language="javascript">  

function test2()

{

//id不能重复，但是name可以重复

var hobbies=document.getElementByName("hobby");

//window.alert(hobbies.length);

for(var i=0;i<hobbies.length;i++)

{ //如何判断是否选择

如果选中，则为真

if(hobbies[i].checked){

程序只认value

window.alert("你的爱好是"+hobbies[i].value);

}

}

}

</script>

 

</head>

<body>

请选择你的爱好

<input type="checkbox" name="hobby" value="足球"/> 足球

<input type="checkbox" name="hobby" value="旅游"/> 旅游

<input type="checkbox" name="hobby" value="音乐"/> 音乐

<input type="button" value="testing" οnclick="test2()"/>

 

</body>

</html>

  1. getElementsByTagName()  

场景：想获得input控件有哪些，这个时候靠名字也拿不到

通过标签名来获取对象（元素）

将来做编程，会遇到各种问题，少一个知识点，都得去问别或者是查资料

html编程就是元素，dom编程就是对象了

综合案例：

<html>

<head>

<script language="javascript">  

  

function test()

{

var myhref=document.getElementById("a1");//其实它只找一个，只找第一个，找到第一个后就返回了，不往后执行了

window.alert(myhref);

}

function test2()

{

//id不能重复，但是name可以重复

想取什么控件都可以

var hobbies=document.getElementsByName("hobby");

//window.alert(hobbies.length);

for(var i=0;i<hobbies.length;i++)

{ //如何判断是否选择

if(hobbies[i].checked){

window.alert("你的爱好是"+hobbies[i].value);

}

}

}

//通过标签名来获取对象（元素）

function test3()

{

var myObjs=document.getElementsByTagName("input");

遍历

不止是value，type，name都可以获取

for(var i=0;i<myObjs.length;i++)

{

window.alert("input:"+myObjs[i].value);

}

}

</script>

 

</head>

<body>

<!-- 故意定义了三个id号相同的超链接 -->

<a id="a1" href="http://www.baidu.com">连接到baidu</a>

<a id="a1" href="http://www.sina.com">连接到sohu</a>

<a id="a1" href="http://www.163.com">连接到163</a>

<input type="button" value="test1" οnclick="test();"/>

 

请选择你的爱好

<input type="checkbox" name="hobby" value="足球"/> 足球

<input type="checkbox" name="hobby" value="旅游"/> 旅游

<input type="checkbox" name="hobby" value="音乐"/> 音乐

<input type="button" value="test2" οnclick="test2();"/>

<input type="button" value="获取所有input" οnclick="test3()"/>

</body>

</html>

下面再来看几个重要的函数

这几个在文档中没有

可以动态操作html文档的

dom分为5级

  1. createElement() 

动态的创建节点html（元素）

  1. appendChild() 

动态的添加节点（元素）

  1. removeChild() 

动态的删除节点（元素）

如何动态的创建 ，删除 html元素

举例说明：

动态的添加元素到document文档中，动态的删除document中的元素

<html>

<head>

<script language="javascript">  

  

function test1()

{

//创建元素

创建完成如果不添加到document对象上，是看不见的

超链接如果没有必要的信息，也是看不见的

var myElement=document.createElement("a"); //写希望创建的标签的名字

//给新的元素添加必要的信息

myElement.href="http://www.baidu.com";

myElement.innerText="连接到百度";

可以定位

//myElement.style.left="200px";

//myElement.style.top="200px";

//myElement.style.position="absolute";

//添加到document.body上去

//document.body.appendChild(myElement);

//将元素添加到某一个div中

document.getElementById("div1").appendChild(myElement);

}

function test2()

{

var myButton=document.createElement("input"); //写希望创建的标签的名字

myButton.type="button";

myButton.value="新加的按钮";

myButton.id="id1";

document.getElementById("div1").appendChild(myButton);

}

function test3()

{   

删除一个元素,必须首先知道它的父元素是谁

这是第一种删除元素的方法，这种方法不灵活

无论是动态创建的还是，原先就有的，都可以删除

动态删除的话，要有一个id号，不然的话无法删除

要清楚的知道父子关系

document.getElementById("div1").removeChild(document.getElementById("id1"));

//第二种比较灵活(推荐)

可以通过子元素找到父元素，然后再进行删除

到公司里面，要求灵活的方式，就采用这种方式，比较好

document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));

}

 

</script>

 

</head>

<body>

<input type="button" value="动态的创建一个超链接" οnclick="test1();"/>

<input type="button" value="动态的创建一个按键" οnclick="test2();"/>

<input type="button" value="删除一个元素" οnclick="test3();"/>

<div id="div1" style="width:200px;height:400px;border:1px solid red ">div1</div>

 

</body>

</html>

Java邦邦
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js基础之DOM中document对象的常用属性方法详解
10-21
下面小编就为大家带来一篇js基础之DOM中document对象的常用属性方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 7243
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
常用dom对象介绍
xian00000的专栏
08-19 1867
DOM，来源于Document Object Model,即文档对象模型，它允许脚本控制Web页面、窗口和文档。     DOM对象使用分层的父对象和子对象，这些对象的组织类似一个树形结构，并表示一个Web文档的所有内容和组建。基本的浏览器对象层次如下图所示： DOM对象" title="JavaScript基础->DOM对象" style="margin-top:0px; margi
JavaScript 之 DOM中的三大对象
weixin_46370867的博客
10-23 905
JavaScript 之 DOM中的三大对象 一、Document对象 1、Document对象是什么 Document对象是DOM的标准规范中比较重要的对象之-。该对象提供了访问和更新HTML页面内容的属性和方法 可以把Document对象理解为在DOM的标准规范中代表HTML页面 Document对象提供的属性和方法，可以实现定位HTML页面中的元素，或者创建新的元素等功能 2、测试Document对象 document对象 DOM预定义：已经创建完毕了，允许直接使用 得到的是HTML页面的源代码
JavaScript核心之Document对象详解（document属性，方法）
热门推荐
上善若泪
04-30 2万+
目录 1 Document节点概述 2 document节点的属性 2.1 doctype，documentElement，defaultView，body，head，activeElement 2.1.1 doctype 2.1.2 documentElement 2.1.3 defaultView 2.1.4 body 2.1.5 head 2.1.6 activeEleme...
DOM学习笔记
weixin_30715523的博客
08-27 120
DOM简介： 1、DOM：Document Object Model（简称文档对象模型），是专门用于操作网页内容API一套标准！网页内容：字符、图片等各种资源 2、核心DOM：操作一切结构化文档的API标准！特点：强大，万能；缺点：操作繁琐。 3、HTML DOM：专门操作HTML网页的API标准--针对核心DOM中部分API进行了简化！优点：操作相对简化；缺点：非万能。 ...
JavaScript——DOM操作——Window.document对象详解
10-21
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
DOM对象.docx
07-23
### DOM对象详解 #### 一、DOM的基本概念 **DOM** 是 **Document Object Model** 的缩写，中文译作“文档对象模型”。它提供了一种跨平台和跨语言的方式来访问和修改HTML或XML文档的内容和结构。DOM的核心价值在于...
JS document对象简单用法完整示例
10-15
本篇文章将详细讲解`document`对象的一些基础用法，包括直接和间接获取页面元素的方法。 1. **直接获取对象** - `getElementById()`：通过元素的ID获取特定元素。例如： ```javascript var element = document....
jQuery对象与DOM对象转换方法详解
10-22
通过`document.getElementById`、`document.querySelector`等方法获取DOM对象，可以直接访问和修改元素的属性、样式和事件。 **jQuery对象转换为DOM对象** 要将jQuery对象转换为DOM对象，可以访问jQuery对象的数组...
DOM 文档对象
最新发布
weixin_55592592的博客
10-19 357
dom 文档对象
DOM对象
weixin_45649686的博客
01-27 4916
1.Html DOM 1.DOM是Document Object Model文档对象（网页中的标签）模型的缩写。 2.通过html DOM，可用javaScript操作html文档的所有标签。 3.DOM对象：指的是一类对象的总称。 4.DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使用面向对象的思想来操作，js中提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document对象，通过document提供的方法精确获得网页中要操作的标签。 2.
Js基础知识之DOM
JCDYN1219的博客
03-30 384
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程-获取文本框的value</title> </head> <body> <script type="text/javascript"> /* 1、JavaScript包括三大块： ECMAScript：JS的核心语法（ES规范 /.
JavaScript对象之document对象
weixin_34234823的博客
06-19 116
DOM对象之document对象 DOM对象：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 打开网页后，首先看到的是浏览器窗口，即顶层的window对象。 其次，看到的是网页文档的内容，即document文档。 首先看一下w3c提供的document对象的定义和其他相关知识： 现...
DOM常用的四大对象是什么？
weixin_33853794的博客
06-01 2392
DOM常用的四大对象是什么？ 一、总结 一句话总结： 1、关注结构，关注主干  2、从主干处着手的话，可以发现dom就是四个东西，document（文档），element，attribute，event（事件）。   1、在 HTML DOM （文档对象模型）中，是否是每个部分都是节点？ 解答：是 2、所有 HTML 属性都是是属性节点么？ 解答：是 3、HTML的文档本身是什...
dom对象详解--document对象(一)
weixin_34357928的博客
04-16 116
document对象 Document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。 Document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document。 document对象常用的函数和属性可参考http://www.w3s...
【webAPI之DOM】（未完待续）
weixin_45118878的博客
10-19 403
WebAPI. DOM可以对网页HTML内容，结构，样式CSS进行调整. 是 HTML 的标准对象模型和编程接口。
HTML DOM Document对象
老狼的专栏
03-07 419
HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点。 所有的HTML元素都是元素节点。 所有 HTML 属性都是属性节点。 文本插入到 HTML 元素是文本节点。are text nodes。 注释是注释节点。 Document 对象 当浏览器载入 HTML 文档, 它就会成为Docume...
HTML DOM Document 对象详解
Hengistchan的博客
01-09 1653
       本文转载于      https://segmentfault.com/a/1190000000660947        在浏览器中，与用户进行数据交换都是通过客户端的javascript代码来实现的，而完成这些交互工作大多数是document 对象及其部件进行的，因此document对象是一个比较重要的对象。 document对象概述 document对象是文档的根节点，w...
HTML DOM对象详解：表格、行与单元格操作
本资源主要聚焦于HTML DOM (Document Object Model) 对象，这是一个核心概念在Web开发中的关键组成部分。HTML DOM 是HTML文档的一种表示形式，它允许脚本动态地访问和操作网页内容。在038HTML-DOM对象的学习文档中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java邦邦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值