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

刺骨的言语ヽ痛彻心扉 2021-09-17 07:46 307阅读 0赞

![标题图][1240]

> Java中的`DOM`和`Javascript`技术

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

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

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

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

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

![内存解析][1240 1]

这些对象都会在内存中产生.在内存中进行解析,我们看到这种树结构,每个部分我们都称为节点,进行解析就对象.`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`对象:

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

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>host</td> 
   <td>设置或获取location或url的hostname和port号码</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>设置或获取location或url的hostname和port号码</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>设置或获取整个url为字符串</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>设置或获取对象指定的文件名或路径</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assign</td> 
   <td>装入新的Html文档</td> 
  </tr> 
  <tr> 
   <td>reload</td> 
   <td>重新装入当前页面</td> 
  </tr> 
  <tr> 
   <td>replace</td> 
   <td>装入指定url的另外文档来替换当前文档</td> 
  </tr> 
 </tbody> 
</table>

`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`属性.

> 层次关系获取节点

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

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)`是用来取消默认效果的, 超链接本身带有默认的事件,现在该超链接不需要默认的事件处理.就需要进行消除.

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

![效果][1240 2]

![效果][1240 3]

// 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>

> 表单校验

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

// 校验方法
    		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()" />

![效果][1240 4]

效果案例:

![效果][1240 5]

<body>
    	
    	<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` 可以实现描述,通过函数来完成.

![效果][1240 6]

// 描述对象
    var a = new Person();
    // 给定义的对象添加属性和行为

for(x in arr){
     alert("x="+x);
    }

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

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

[1240]: /images/20210724/eab4ffcb3ab14127a5f81a0a11f099d3.png
[1240 1]: /images/20210724/11ec278d2f5d4b8d8fc4e91489418925.png
[1240 2]: /images/20210724/7bce421415e941c2b8ead89d9b794eef.png
[1240 3]: /images/20210724/d15c41091e0c406991c2574a0254cf94.png
[1240 4]: /images/20210724/cb44ad79180445168a2fb817a440190e.png
[1240 5]: /images/20210724/bfa5e9ae38924c97a9d20b14ef160d5c.png
[1240 6]: /images/20210724/3cfd50f403094cbd9273656b663a03c6.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1