第61节:Java中的DOM和Javascript技术

Java中的DOM和Javascript技术

DOM是一门技术,是文档对象模型.所需的文档只有标记型文档,如我们所学的html文档(文档中的所有标签都封装成为对象了)

DOM: 为Document Object Model, 文档对象模型, 是用来将标记文档以及文档中的标签等所有内容都封装成对象.

把标签文档中所有的标签封装成对象, 文档也封装成对象,DOM技术(标记型文档封装成对象)

DOM技术存在浏览器中,内置了DOM技术解析器,变对象是需要进行解析的,描述进行封装.在内存当中进行解析,为Demo.html文档.

内存中把文档进行解析,文档封装成对象.

这些对象都会在内存中产生.在内存中进行解析,我们看到这种树结构,每个部分我们都称为节点,进行解析就对象.DOM的技术,使得文档和内容都变成了对象,才有了操作的这些对象的属性和行为.

DHTML:

动态的html,实现了与用户的动态交互,多项技术综合的简称.(HTML,CSS,JAVASCRIPT,DOM + xmlHTTPRequest为AJAX)

HTML:提供标签,用于封装数据.

css:提供样式.

JavaScript:提供逻辑型较强的程序设计,可以用来对对象进行操作和控制,是负责页面的动态效果和行为.

DOM:提供解析,将标记文档以及文档中的内容都封装成为对象,这样就可以操作对象中的属性和行为.

BOM模型

Browser Object Model 浏览器对象模型,浏览器本身就是一个对象.将浏览器以及浏览器中的内容封装成对象.

window: 本身代表浏览器窗体对象.

window对象

<input type="button" value="按钮" onclick="alert('hello')"/>

<input type="button" value="按钮" onclick="locationDemo()"/>

<script type="text/javascript">

 function locationDemo(){

  alert('hello');

 }

</script>

window对象:

对象	描述
`location`	包含关于当前URL的信息
`navigator`	包含关于web浏览器的信息
`screen`	包含关于客户屏幕和渲染能力的信息
`event`	代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态
`document`	代表给定浏览器窗口中的html文档

location对象: 包含关于当前URL的信息.

属性	描述
host	设置或获取location或url的hostname和port号码
hostname	设置或获取location或url的hostname和port号码
href	设置或获取整个url为字符串
pathname	设置或获取对象指定的文件名或路径

方法	描述
assign	装入新的Html文档
reload	重新装入当前页面
replace	装入指定url的另外文档来替换当前文档

<script type="text/javascript">

 function locationDemo(){

  alert(location.href);

 }

</script>

getElementById 根据'id' 标签属性指定值的第一个对象的引用

getElementsByName 根据name标签属性的值获取对象的集合

getElementsByTagName 根据获取指定元素名称的对象集合.

<body>

<script text="text/javascript">

 function document(){

  var divNode = document.getElementById("divid");

  alert(divNode.nodeName);

  alert(divNode.innerHTML);

  divNode.innerHTML = "达叔".fontcolor("red");

 }

</script>

<input type="button" value="document对象" onclick="documentDemo()"/>

<div>区域</div>

<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

<span></span>

<input type="text" name="user"/>

<a href="https://www.jianshu.com/u/c785ece603d1">达叔小生</a>

</body>

getElementsByName

<input type="text" name="user"/>

<script text="text/javascript">

function documentDemo(){

 var nodes = documents.getElementsByName("user");

 alert(nodes[0].value);

}

</script>

getElementsByTagName

id属性,name属性,表单标签中经常具有name属性.

function documentDemo(){

 var divNodes = document.getElementsByTagName("div");

 // 遍历节点

 for(var x=0; x<divNodes.length; x++){

  alert(divNodes[x].innerHTML);

 }

 var tableNode = document.getElementById("tableid");

 var divNodes2 = tableNode.getElementsByTagName("div");

 for(var y=0; y<divNodes2.length; y++){

  alert(divNodes2[y].innerHTML);

 }

}

层次关系获取节点

父节点唯一性
子节点不唯一性,是数组

function getNodeByDemo(){

 var tableNode = document.getElementById("tableid");

 var node = tableNode.parentNode;

 alert(node.nodeName);

 var nodes = tableNode.childNodes;

 alert(nodes.length);

 alert(nodes[0].nodeName);

 // 节点的子节点

 var nodes = tableNode.childNodes[0].childNodes;

 for(var z=0; z<nodes.length; z++){

  alert(nodes[z].nodeName);

 }

 // 获取兄弟节点

 var node=tableNode.nextSibling;

 alert(node.nodeName);

 var node2 = tableNode.perviousSibling;

 alert(node2.nodeName);

}

案例

javascript:void(0)是用来取消默认效果的, 超链接本身带有默认的事件,现在该超链接不需要默认的事件处理.就需要进行消除.

处理方式,需要进行明确的处理节点,获取该节点的对象,并调用其属性和行为.

<div id="newsdiv">

 <h1>标题</h1>

 <a href="javascript:void(0) onclick="changeFont(24px)"  ">大字体</a>

 <a href="javascript:void(0) onclick="changeFont(16px)" ">中字体</a>

 <a href="javascript:void(0) onclick="changeFont(10px)" ">小字体</a>

 <hr>

 <div id="newstext">

达叔小生

 </div>

</div>

// div文字的大小

<div id="newsdiv">

 <h1>标题</h1>

 <a href="javascript:void(0) onclick="changeFont(24px)"  ">大字体</a>

 <a href="javascript:void(0) onclick="changeFont(16px)" ">中字体</a>

 <a href="javascript:void(0) onclick="changeFont(10px)" ">小字体</a>

 <hr>

 <div id="newstext" style="font-size: 26px">

达叔小生

 </div>

<script text="text/javascript">

function changeFont(size){

 var divNode=document.getElementById("newstext");

 // divNode.style.font-size

 divNode.style.font-size = size;

}

</script>

样式封装

	.maxfont{

		font-size: 24px;

		color:#66CCFF;

		background-color: #FFCCFF;

	}

	.normfont{

		font-size: 16px;

		color:#686868;

		background-color: #FFFFFF;

	}

	.minfont{

		font-size: 12px;

		color:#FF3300;

		background-color: #99FF99;

	<script type="text/javascript">

		function changeFont(classValue){

			var divNode = document.getElementById("newstext");

			divNode.className = classValue;

		}

	</script>

<div id="newstext" class="normfont" >

</div>

表单校验

明确事件源和事件
提示信息展示方式

	<form id="formid" onsubmit="return checkForm()">

		用户名称：<input type="text" name="user" onblur="checkUser()" />

			<span id="userspan"></span><br />

	</form>

	<hr>

	<input type="button" value="自定义提交" onclick="myCheckForm()" />

// 校验方法

		function checkUser() {

			var flag = false;

			var userNode = document.getElementsByName("user")[0];

			var username = userNode.value;

			var spanNode = document.getElementById("userspan");

			// 对用户名进行正则表达式的判断

			var regex = new RegExp("^[a-zA-Z]{4}$");

			if (regex.test(username)) {

				spanNode.innerHTML = "用户名正确".fontcolor("green");

				flag = true;

			} else {

				spanNode.innerHTML = "用户名错误".fontcolor("red");

			}

			return flag;

		}

//校验表单。

		function checkForm() {

			if (checkUser()) {

				return true;

			}

			return false;

		}

表单校验

function myCheckForm() {

//获取表单对象。

 var formNode = document.getElementById("formid");

 if (checkUser()) {

  //调用提交方法

  formNode.submit();

 }

}

	<form id="formid" onsubmit="return checkForm()">

		用户名称：<input type="text" name="user" onblur="checkUser()" />

			<span id="userspan"></span><br />

	</form>

	<hr>

	<input type="button" value="自定义提交" onclick="myCheckForm()" />

效果案例:

<body>

	<!--

因为标签都在文档中，所以想要获取标签需要先有document对象

	getElementById 获取对 ID 标签属性为指定值的第一个对象的引用

	getElementsByName 根据 NAME 标签属性的值获取对象的集合

	getElementsByTagName 获取基于指定元素名称的对象集合

	 -->

	<script type="text/javascript">

		function documentDemo(){

			var divNode = document.getElementById("divid");

			//alert(divNode.nodeName);//获取节点的名称。

			//alert(divNode.innerHTML);//获取div中的文本

			divNode.innerHTML = "新文本".fontcolor("red");

		}

		function documentDemo2(){

			//getElementsByName

			//var nodes = document.getElementsByName("user");

			//alert(nodes[0].value);

			var node = document.getElementsByName("user")[0];

			node.value = "hehe";

		}

		function documentDemo3(){

			//getElementsByTagName

			//获取文档中所有的div

			var divNodes = document.getElementsByTagName("div");

			//遍历div节点

			for(var x=0; x<divNodes.length; x++){

				//alert(divNodes[x].innerHTML);

			}

			//需求：获取表格中所有的div。

			var tableNode = document.getElementById("tableid");

			var divNodes2 = tableNode.getElementsByTagName("div");

			for(var y=0; y<divNodes2.length; y++){

				alert(divNodes2[y].innerHTML);

			}

		}

		//按照节点层次关系获取节点。

		function getNodeByLevel(){

			//获取表格节点

			var tableNode = document.getElementById("tableid");

			//1,获取表格节点父节点

			//var node = tableNode.parentNode;

			//alert(node.nodeName);

			//2,获取表格节点的子节点。

			/*

			var nodes = tableNode.childNodes[0].childNodes;

			for(var z=0; z<nodes.length; z++){

				alert(nodes[z].nodeName);

			}

			*/

			//3,获取兄弟节点。有可能会获取到空文本节点。

			var node = tableNode.nextSibling;

			//alert("nextSibling:"+node.nodeName);

			var node2 = tableNode.previousSibling;

			//alert("previousSibling:"+node2.nodeName);

		}

	</script>

	<input type="button" value="演示Document对象" onclick="getNodeByLevel()" />

	<div id="divid">DIV</div>

	<table id="tableid">

		<tr>

			<td>一</td>

			<td>二</td>

		</tr>

		<tr>

			<td><div>三</div></td>

			<td><div>四</div></td>

		</tr>

	</table>

</body>

下拉菜单

选择国家：

<select name="country" >

 <option value="none">--选择国家--</option>

 <option value="cn">中国</option>

 <option value="usa">美国</option>

 <option value="en">英国</option>

</select>

<span id="countryspan" ></span><br/>

		//校验国家

		function checkCountry(){

			var flag = true;

			//获取下拉菜单对象

			var selNode = document.getElementsByName("country")[0];

			//获取所有的option对象的集合

			var optNodes = selNode.options;

			var spanNode = document.getElementById("countryspan");

			var val = optNodes[selNode.selectedIndex].value;

			if(val=="none"){

				spanNode.innerHTML = "必须选择一个国家".fontcolor("red");

				flag = false;

			}

			return flag;

		}

		选择国家：

			<select name="country" >

				<option value="none">--选择国家--</option>

				<option value="cn">中国</option>

				<option value="usa">美国</option>

				<option value="en">英国</option>

			</select>

			<span id="countryspan" ></span><br/>

js基于对象的,可以面试对象的方式进行开发

面向对象,需要对对象进行描述,js 可以实现描述,通过函数来完成.

// 描述对象

var a = new Person();

// 给定义的对象添加属性和行为

for(x in arr){

 alert("x="+x);

}

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客：达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

第61节:Java中的DOM和Javascript技术的更多相关文章

第70节:Java中xml和tomcat
第70节:Java中xml和tomcat 前言: 哭着也要看完,字数: jdbc crud - statement dao java.sql.Driver The interface that eve ...
第83节:Java中的学生管理系统分页功能
第83节:Java中的学生管理系统分页功能分页功能一般可以做成两种,一种是物理分页,另一种是逻辑分页.这两种功能是有各自的特点的,物理分页是查询的时候,对数据库进行访问,只是查一页数据就进行返回,其 ...
第82节:Java中的学生管理系统
第82节:Java中的学生管理系统学生管理系统的删除功能删除,点击超链接,点击弹出对话框式是否进行删除,如果确定,就删除,超链接执行的是js方法,在js里访问,跳转servlet,,servlet ...
第80节:Java中的MVC设计模式
第80节:Java中的MVC设计模式前言了解java中的mvc模式.复习以及回顾! 事务,设置自动连接提交关闭. setAutoCommit(false); conn.commit(); conn ...
第79节:Java中一些要点
第79节:Java中一些要点前言一些知识点忘了没,可以通过一个点引出什么内容呢?做出自己的思维导图,看看自己到了哪一步了呢内容如果有人问jre,jdk,jvm是什么,你怎么回答呢? jre的英 ...
第78节:Java中的网络编程(上)
第78节:Java中的网络编程(上) 前言网络编程涉及ip,端口,协议,tcp和udp的了解,和对socket通信的网络细节. 网络编程 OSI开放系统互连网络编程指IO加网络 TCP/IP模型: ...
第77节:Java中的事务和数据库连接池和DBUtiles
第77节:Java中的事务和数据库连接池和DBUtiles 前言看哭你,字数:8803,承蒙关照,谢谢朋友点赞! 事务 Transaction事务,什么是事务,事务是包含一组操作,这组操作里面包含许 ...
第76节:Java中的基础知识
第76节:Java中的基础知识设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题使用request. ...
第71节:Java中HTTP和Servlet
第71节:Java中HTTP和Servlet 前言哭着也要看完!!!字数: 学习xml和TomCat 会写xml,看懂xml 解析对象 SAXReader reader = new SAXReade ...

随机推荐

MySQL开发设计规范
1.库命名规则:dbname_suffix,分为_dev/_test/_pre/_mertest/_perf/_prod六个环境 2.适度反范式设计,冗余表字段数据减少JOIN关联提高访问效率 3.普 ...
内嵌圆角CSS实现
前言开发项目时,经常会遇到如上图左上角和右上角这种内嵌的圆角效果,在以前css3还没有普及时不用说一张图片搞定,但是到现在我们完全可以用css去实现. 实现第一步:思路仔细观察这个小缺角,它其实 ...
判断作业完成之读取log 脚本
tail 用于读取文件末尾 -n 后边加行数 -f 为持续追踪,实时输出 NUMECA 输出最后两行 ...done in 727.84-sec (STARTING NUMECA FLOW SOLVE ...
python3 第二十七章 - 内置函数之str相关
Python 的字符串常用内建函数如下: 序号方法及描述实例 1 capitalize()将字符串的第一个字符转换为大写 2 center(width, fillchar) 返回一个指定的宽度 ...
YAML-CPP
yaml作为一种便捷的文件格式,通过c++进行操作时,可以利用yaml-cpp进行. 一,yaml-cpp的安装下载源码 git clone https://github.com/jbeder/ya ...
Unity Button事件的简洁处理
看到很多人依然还是通过最原始的方法给button绑定事件并处理,这种通过Find往子集一个个的查找,获取到后再绑定事件这种操作很费事,有些人则是对查找对象写了个方法自动往子集遍历更方便获取对象,但还是 ...
zabbix监控配置与邮件告警
添加主机与主机组进入web页面,在配置-主机群组,创建主机群组在配置-主机,新建主机在可见的名称中建议填写为类似主机类型-主机名-IP或域名的格式,如Web-Hyrule001-192. ...
虚方法(virtual)和抽象方法(abstract)的和接口(interface)的区别
虚方法(virtual)和抽象方法(abstract)的区别 2017年06月15日 13:41:26 阅读数:65 注:本文转载自 http://www.cnblogs.com/michaelxu/ ...
别人的Linux私房菜（21）基础系统设置与备份策略
网络设置,手动设置IP,DHCP自动获取. 以太网协议开发出来的网卡ethN,N为数字. CentOS7对网卡命名的规则:eno代表由主板BIOS内建立的网卡,ens1由主板BIOS内建的PCI-E界 ...
4yue 22
1 # 1 . 进程线程协程之间的相同点和不同点 #相同点:都能帮助我们实现并发操作,规避IO时间,提高执行效率 #进程:内存隔离操作系统级别可以利用多核(高计算) 计算机中资源分配的最小单 ...

第61节:Java中的DOM和Javascript技术

window对象

结语

第61节:Java中的DOM和Javascript技术的更多相关文章

随机推荐

热门专题