文档对象模型DOM

最新推荐文章于 2023-04-27 17:51:21 发布
最新推荐文章于 2023-04-27 17:51:21 发布
阅读量228 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FangFeiXinLingamp/article/details/79370912
版权

1.加载

<html>
<head>
<script type="text/javascript">
function myload(){
}
//window.omload = myload;
window.omload = function(){
	var btn = document.getElementById("btn1");
	btn.onclick = myload;
	btn1.onclick = myload;
};
</script>
</head>
<body οnlοad="myload()">
</body>
</html>

2.json

<html>
<head>
<script type="text/javascript">
var student = {
	"name":"zhangsan",
	"age":19,
	"eat":function(){}
	};

var student = function (){
};
var xiaoxin = new student();
</script>
</head>
<body οnlοad="myload()">
<input type="text" onkeypress = "mykeypress(event)"/>
</body>
</html>

3.

<html>
<head>
<script type="text/javascript">
function mykeypress(event){
	var tmpevent = event
	var key = tmpevent.which ? tmpevent.which:tmpeven.keyCode;
}

</script>
</head>
<body οnlοad="myload()">
<input type="text" onkeypress = "mykeypress(event)"/>
</body>
</html>
dom的含义:Dom是一个表达XML文档的标准(由W3C指定的),一颗枝繁叶茂的"节点树"
dom的操作方法
getElementById方法
怎么定位dom元素 
<html>
<head>
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
for(var i in lis){
alert(typeof lis[i]);
}
</script>
</head>
<body onload = "myload">
<ul>
   <li>aaaaaaaaaaaaa</li>
   <li>bbbbbbbbbbbbb</li>
   <li>CCCCCCCCCCCCC</li>
</ul>
  <input type="text" onkeypress = "mykeypress(event)"
</body>
</html>

4

<html>
<head>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName("li");
for(var i in lis){
alert(typeof lis[i]);
}
}
</script>
</head>
<body onload = "myload">
<ul>
   <li>aaaaaaaaaaaaa</li>
   <li>bbbbbbbbbbbbb</li>
   <li>CCCCCCCCCCCCC</li>
</ul>

</body>
</html>

5.

<html>
<head>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName("li");
for(var i in lis){
 if(lis[i].nodeName == "li"){
alert(typeof lis[i]);
}
}
};
</script>
</head>
<body onload = "myload">
<ul>
   <li>aaaaaaaaaaaaa</li>
   <li>bbbbbbbbbbbbb</li>
   <li>CCCCCCCCCCCCC</li>
</ul>

</body>
</html>

6.

getElementsByTagName
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName("li");
  for(var i = 0; i< lis.length; i++){
  alert(typeof lis[i]);
}
};
</script>
</head>
<body onload = "myload">
<ul>
   <li>aaaaaaaaaaaaa</li>
   <li>bbbbbbbbbbbbb</li>
   <li>CCCCCCCCCCCCC</li>
</ul>

</body>
</html>

7. 增加节点的两种方法

 <HTML>
 <HEAD>
  <TITLE> 增加节点 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
    function myclick(){
	var p1 = document.createElement("P");
	var div1 = document.getElementById("mydiv");
	div1.innerHTML="<p>bbbbbbbbbbbb</p>";//div增加节点
	var txt1 = document.createTextNode("aaaaaaaaaaaa");//XML DOM创建节点
	p1.appendChild(txt1);
	document.body.appendChild(p1);
	}
  </script>
 </HEAD>

 <BODY>
  <input type="button" value="增加节点" οnclick="myclick()" />
  <div id = "mydiv"></div>
 </BODY>
</HTML>

8.删除节点

 <HTML>
 <HEAD>
  <TITLE> 删除节点 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
    function myclick(){
	
	var div1 = document.getElementById("mydiv");
	var p1 = document.getElementById("p1");
	div1.removeChild(p1);
	
	}
  </script>
 </HEAD>

 <BODY>
  <input type="button" value="删除节点" οnclick="myclick()" />
  <div id = "mydiv"><p id="p1">删除节点</p></div>
  
 </BODY>
</HTML>

运行效果:


9.删除表格节点

<HTML>
 <HEAD>
  <TITLE> 删除表格节点 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
    function myclick(){	
	var table1 = document.getElementById("table1");
	var tr1 = document.getElementById("tr1");
     tr1.parentNode.removeChild(tr1);	
	}
  </script>
 </HEAD>
 <BODY>
  <input type="button"  value="删除表格节点" οnclick="myclick()" />
  <table border = "1px" id = "table1">
  <tr id="tr1"><td>aaa</td><td>aaa</td></tr>
   <tr><td>aaa</td><td>aaa</td></tr>
  </table>
 </BODY>
</HTML>

运行效果

10.innerHTML、innerText和outerHTML、outerText的区别


innerHTML 设置或获取位于对象起始和结束标签内的;

HTMLouterHTML 设置或获取对象及其内容的 HTML 形式;

innerText 设置或获取位于对象起始和结束标签内的文本;

outerText 设置(包括标签)或获取(不包括标签)对象的文本;


 <HTML>
 <HEAD>
  <TITLE> inner和outer区别 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
    function myclick(){
	var p1 = document.createElement("P");
	var div1 = document.getElementById("mydiv");
	div1.innerHTML +="<p>bbbbbbbbbbbb</p>";
	div1.innerText;
	div1.outerHTML;
	div1.outerText;
	var txt1 = document.createTextNode("aaaaaaaaaaaa");
	p1.appendChild(txt1);
	document.body.appendChild(p1);
	}
  </script>
 </HEAD>

 <BODY>
  <input type="button" value="inner和outer区别" οnclick="myclick()" />
  <div id = "mydiv"></div>
 </BODY>
</HTML>

11.全选

 <HTML>
 <HEAD>
  <TITLE> 全选 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
    window.onload = function(){	
	var aihaos = document.getElementsByName("aihao");	
	for(var i = 0; i < aihaos.length;i++){
	  alert(aihaos[i].value);
	  }
	};
	 function myclick(){	
	var aihaos = document.getElementsByName("aihao");
	var allSel = document.getElementById("sel");
	 for(var i = 0; i < aihaos.length;i++){
	  if(allSel.checked ==true){
	   for(var i = 0; i < aihaos.length;i++){
	     aihaos[i].checked = true;
	  }
		
	  }else{
       for(var i = 0; i < aihaos.length;i++){
	    aihaos[i].checked = false;
	  }
         
	     }
	   }
	}
  </script>
 </HEAD>

 <BODY>
 <from name = "myfrom">
 <input type="checkbox" id="sel" οnclick="myclick()"/>全选<br/>
  <input type="checkbox" name="aihao" value="篮球"  />
  篮球<br/>
  <input type="checkbox" name="aihao" value="足球"  />
  足球<br/> 
  <input type="checkbox" name="aihao" value="排球"  />
  排球<br/>
</from>
 </BODY>
</HTML>

12.输出属性

alert(allSel.getAttribute("type")); 
alert(allSel.type);



innerHTML 设置或获取位于对象起始和结束标签内的 HTMLouterHTML 设置或获取对象及其内容的 HTML 形式innerText 设置或获取位于对象起始和结束标签内的文本outerText 设置(包括标签)或获取(不包括标签)对象的文本
@computervip
关注
专栏目录
DOM(文档对象模型)
m0_68870440的博客
06-23 1819
DOM(文档对象模型)
文档对象模型DOM通俗讲解
09-04
文档对象模型（DOM）是Web开发中的一个关键概念，它为HTML和XML文档提供了一个结构化的表示，并允许程序和脚本动态地访问和更新文档内容、结构和样式。DOM是独立于语言的标准，这意味着任何支持DOM的编程语言都可以...
一篇文带你了解文档对象模型DOM（Document Object Model）
cai niaoyihao_的博客
06-06 3550
一篇文带你了解文本对象模型DOM（Document Object Model）
文档对象模型 DOM
blog
09-03 585
文章目录一、DOM 是什么？二、DOM 中的节点1.常见节点2.获取元素节点的方式三、获取和设置属性总结 前言： 一、DOM 是什么？ DOM 全称是 Document Object Model ，通过 DOM 我们可以把一个网页文档看作成一棵树，也就是我们常说的 DOM 树。 Document 代表整个网页文档； Object 代表对象，例如 window 对象； Model 代表模型。 二、DOM 中的节点 1.常见节点 元素节点 文本节点 属性节点 2.获取元素节点的方式
DOM（文档对象模型）
最新发布
weixin_68705721的博客
04-27 413
文DOM（文档对象模型） 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。
文档对象模型dom_详细了解文档对象模型（DOM）
cune1359的博客
07-05 549
我们都听说过不时提到与JavaScript相关的DOM或文档对象模型 。 DOM是Web开发中一个非常重要的概念。 没有它，我们将无法在浏览器中动态修改HTML页面 。 学习和理解DOM可以更好地访问，更改和监视 HTML页面的不同元素。 文档对象模型还可以帮助我们减少脚本执行时间的不必要增加 。 另请参阅： Web开发人员用于DOM操作的15种JavaScript方法 数据结构树...
什么对象表示html的整个页面文档,文档对象模型DOM知多少？
weixin_42207707的博客
06-05 468
原标题：文档对象模型DOM知多少？ 1、什么是DOM？文档对象模型DOM是针对XML但经过扩展用于HTML的应用程序编程接口API，DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。通过DOM创建的表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除、添加、替换或...
文档对象模型dom_什么是DOM（文档对象模型）？
cunjiu9486的博客
10-11 565
文档对象模型domThe DOM or Document Object Model is the representation of objects and hierarchy in a document which is generally an HTML or XML document. DOM is the skeleton of a document where changes over ...
文档对象模型DOM概述及DOM树
hongcaixia的博客
11-28 3313
DOM技术 1.Dom概述？ * 什么是DOM？  docuemnt object model 文档对象模型 * 它的作用？   重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目 * 分类？    Core DOM :   定义了一套标准的针对任何结构化文档的对象  XML  DOM :   定义了一套标准的针对 XML 文档的对象  HTML DOM :   定义
DOM——文档对象模型（Document Object Model）
qq_20006765的博客
08-23 1243
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。
Form表单的监听事件
菜鸟的博客
03-06 8065
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; Form表单的监听事件 &lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus&qu
JAVAScript实现增添行和删除行
菜鸟的博客
02-16 522
JAVAScript实现增添行和删除行&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="mytable" border="1" width="50%"&gt; &lt;tr&gt;&lt;td&gt;删除这一行&lt;
第二章 JavaScript事件处理
菜鸟的博客
02-23 450
1.JavaScript事件应用-按钮单击事件 &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function myclick(btn){ alert(btn.value); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form na
document对象
菜鸟的博客
02-27 318
1.获取属性和方法 &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; 获取属性和方法 &lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus"&gt; &lt;META NAME="Author" CONTENT=""&gt;
node.js的安装与环境配置
菜鸟的博客
03-06 284
1.官网下载node.js的安装包2.安装node.js3.配置环境变量4.测试安装命令
常用正则表达式
菜鸟的博客
02-16 218
正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。匹配中文字符的正则表达式： [\u4e00-\u9fa5]评注：匹配中文还真是个头疼的事，有了这个表达式就好办了匹配双字节字符(包括汉字在内)：[^\x00-\xff]评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）匹配空白行的正则表达式：\n\s*\r评注：可以用来删除空白...
XML文档对象模型DOM详解
"XML中的DOM，即文档对象模型，是一种用于表示和处理HTML或XML文档的标准化接口，由W3C组织定义。它将文档解析为节点对象树，允许程序员动态创建、遍历、修改和删除文档内容。" DOM（Document Object Model）是Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值