第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对象:

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

getElementById 根据'id' 标签属性指定值的第一个对象的引用
getElementsByName 根据name标签属性的值获取对象的集合
getElementsByTagName 根据获取指定元素名称的对象集合.

区域达叔小生

getElementsByName

getElementsByTagName

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

function documentDemo(){ var divNodes = document.getElementsByTagName("div"); // 遍历节点
 for(var x=0; x
层次关系获取节点
父节点唯一性
子节点不唯一性,是数组
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
案例
javascript:void(0)是用来取消默认效果的, 超链接本身带有默认的事件,现在该超链接不需要默认的事件处理.就需要进行消除.
处理方式,需要进行明确的处理节点,获取该节点的对象,并调用其属性和行为.
 标题
 大字体
 中字体
 小字体
 

 达叔小生 
效果
效果
// div文字的大小
 标题
 大字体
 中字体
 小字体
 

  达叔小生 
样式封装
    .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;    
表单校验
明确事件源和事件
提示信息展示方式
    

    

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

    
    
    
效果
效果案例:
效果

    
    
        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

    
    DIV
    
        
            一
            二
        
        
            三
            四
        
    
下拉菜单
选择国家：
 --选择国家--
 中国
 美国
 英国
        //校验国家
        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;
        }

        选择国家：
            
                --选择国家--
                中国
                美国
                英国
            
            
js基于对象的,可以面试对象的方式进行开发
面向对象,需要对对象进行描述,js 可以实现描述,通过函数来完成.
效果
// 描述对象var a = new Person();// 给定义的对象添加属性和行为
for(x in arr){
 alert("x="+x);
}


作者：达叔小生
链接：https://www.jianshu.com/p/235095e81735