进阶学习之JavaScript的BOM编程和DOM编程

其他 2018-08-17 09:11:08 阅读次数: 0

一、BOM(Browser Object Model)：浏览器对象模型

1、浏览器对象模型：把浏览器 的各个部分都是用了一个对象进行描述，如果我们要
操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。

2、BOM对象

对象 解释
window 代表了一个新开的窗口
location 代表了地址栏对象
screen 代表了整个屏幕的对象

3、window对象常用方法

方法 解释
open() 打开一个新的窗口并装入给定URL文档
resizeTo() 将窗口的大小更改为指定的宽度和高度值
moveBy() 相对于原来的窗口移动指定的x、y值
moveTo() 将窗口左上角的屏幕位置移动到指定的x和y位置
setInterval() 每经过指定毫秒值后就会执行指定的代码
clearInterval() 根据一个任务的ID取消的定时任务
setTimeout() 经过指定毫秒值后执行指定的代码一次

注意： 使用window对象的任何属性与方法都可以省略window对象不写的。

<script>
    function showMovie(){   
        open("Movie.html","_blank","height=500px,width=500px,toolbar=no,location=no,top=200px");        
    }

    setTimeout("showMovie()",2000);

    var id = window.setInterval("showMovie",2000);

    function small(){
        resizeTo(300,200); //相对于原本窗口改变指定的大小 
    }

    function move(){
        window.moveBy(50,0); // 相对于原来的窗口移动指定的x、y值
        moveBy(0,50);
    }

    function move2(){
        window.moveTo(500,200); 
    }

    function clearMovie(){
        window.clearInterval(id);   
    }
</script>

<body>
    <input type="button" onclick="showMovie()" value="看电影"/>
    <input type="button" onclick="small()" value="变小"/>
    <input type="button" onclick="move()" value="moveBy"/>
    <input type="button" onclick="move2()" value="moveTo"/>
    <input type="button" onclick="clearMovie()" value="取消定时任务"/>    
</body>

4、事件的注册

<script type="text/javascript">
//方式一： 直接在html元素上注册
<body onload="ready()">
    function ready(){
        alert("body的元素被加载完毕了"); 
    }
//方式二：可以js代码向找到对应的对象再注册【推荐使用】
var bodyNode = document.getElementById("body");
bodyNode.onload = function(){
    alert("body的元素被加载完毕");  
} 
</script>

5、window对象

事件 解释
鼠标点击相关
onclick 在用户用鼠标左键单击对象时触发
ondblclick 当用户双击对象时触发
onmousedown 当用户用任何鼠标按钮单击对象时触发
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发
鼠标移动相关
onmouseout 当用户将鼠标指针移出对象边界时触发
onmousemove 当用户将鼠标划过对象时触发
焦点相关的
onblur 在对象失去输入焦点时触发
onfocus 当对象获得焦点时触发
其他
onchange 当对象或选中区的内容改变时触发
onload 在浏览器完成对象的装载后立即触发
onsubmit 当表单将要被提交时触发 
<script>
    function clickTest(){
        alert("单击..");  
    }

    function dbClick(){
        alert("双击..");  
    }

    function showTime(){
        var timeSpan = document.getElementById("timeSpan");
        var date  = new Date().toLocaleString();
        timeSpan.innerHTML = date.fontcolor("red");
    }

    function hideTime(){
        var timeSpan = document.getElementById("timeSpan");
        timeSpan.innerHTML = "";
    }

    function showInfo(){
        var timeSpan = document.getElementById("userName");
        timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");  
    }

    function hideInfo(){
        var timeSpan = document.getElementById("userName");
        timeSpan.innerHTML = "";    
    }

    function change(){
        alert("城市改变了"); 
    }
</script>

<body>
    <input type="button" onclick="clickTest()" value="单击" />
    <input type="button" ondblclick="dbClick()" value="双击"/> 

    <span onmousemove="showTime()" onmouseout="hideTime()">查看当前系统时间：</span><span id="timeSpan"></span>

    用户名：<input type="text" onfocus="showInfo()"  onblur="hideInfo()"/><span id="userName"></span>

    <select onchange="change()" >
        <option>广州</option>
        <option>深圳</option>
        <option>上海</option>
    </select>
</body>

6、Location对象

属性和方法 解释
href 设置以及获取地址栏的对象
reload() 刷新当前的页面 
<script type="text/javascript">
    function showURL(){
        alert(location.href);   
    }
    function download(){
        location.href="http://www.baidu.com";
    }
    function rafresh(){
        location.reload();  
    }
    window.setInterval("rafresh()",1000);
</script>

<body>
    <input type="button" onclick="showURL()" value="显示地址栏"/>
    <span onclick="download()">下载电影</span>
</body>

7、screen对象

属性 解释
availHeight 获取系统屏幕的工作区域高度，排除Windows任务栏
availWidth 获取系统屏幕的工作区域宽度，排除Windows任务栏
height 获取屏幕的垂直分辨率
width 获取屏幕的水平分辨率 
document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");
document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");
document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");
document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");

二、DOM(Document Object Model)：文档对象模型

1、一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述，我们在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。 

<script>
    var allNodes = document.all;   //获取html文件中的所有标签节点
    for(var i = 0; i<allNodes.length ; i++){
        alert(allNodes[i].nodeName);     //标签的名字  nodeName;
    }

    function writeUrl(){
        var links = document.links; // 获取文档中含有href的属性的标签。
        for(var i = 0; i<links.length ; i++){
            links[i].href = "http://www.百度.com";    
        }
    }
</script>

<body>
    <a href="#">标题1</a>
    <a href="#">标题2</a>
    <a href="#">标题3</a>
    <input type="button" onClick="writeUrl()" value="设置a标的地址"/>
</body>

2、通过html元素的标签属性找节点

<script type="text/javascript">
    document.getElementById("html元素的id") 
    document.getElementsByTagName("标签名") 
    document.getElementsByName("html元素的name")

    function showText(){
        var inputNode = document.getElementById("userName");  //根据ID属性值找元素
        inputNode.value = "输入：张三";
    }
    //InnerHTml是用于设置标签体的内容的，value是用于设置标签的value属性值

    function showImage(){
        var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
        for(var i = 0 ; i<images.length ; i++){
            images[i].src = "1.jpg";
            images[i].width="100";
            images[i].height="100";
        }
    }

     function showDiv(){
        var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组
        for(var i = 0 ; i<divs.length ; i++){
            divs[i].innerHTML = "啦啦啦".fontcolor("red"); 
        }
    }
</script>

<body>  
    <input type="text" id="userName" value="请输入用户名：" /><input type="button" onclick="showText()" value="自动输入张三"/>
    <hr/>

    <img src="" />
    <img src="" />
    <img src="" />
    <input type="button" onclick="showImage()" value="显示图片"/>
    <hr/>

    <div name="info"></div>
    <div name="info"></div>
    <div name="info"></div>
    <input type="button" onclick="showDiv()" value="设置div内容"/> 
</body>

3、练习

<script type="text/javascript">
    function checkAll(allNode){
        //找到所有的的选项
        var items = document.getElementsByName("item");
        //找到全选按钮的对象
        //var allNode = document.getElementsByName("all")[0];
        for(var i = 0 ; i<items.length ; i++){
            items[i].checked =  allNode.checked;
        }
    }

    function getSum(){
        var items = document.getElementsByName("item");
        var sum = 0;
        for(var i = 0 ; i<items.length ; i++){
            if(items[i].checked){
                sum += parseInt(items[i].value);
            }   
        }   
        var spanNode = document.getElementById("sumid");
        spanNode.innerHTML = ("&nbsp;&nbsp;&nbsp;&yen;"+sum).fontcolor("green");
    }
</script>

<body>
    <div>商品列表</div>
        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="1800"  />笔记本电脑1800元<br />
        <input type="checkbox" name="item" value="300"  />笔记本电脑300元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
        <input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br />
        <input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
</body>

4、通过关系（父子关系、兄弟关系）找标签

属性 解释
parentNode 获取当前元素的父节点
childNodes 获取当前元素的所有下一级子元素
firstChild 获取当前节点的第一个子节点
lastChild 获取当前节点的最后一个子节点
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）

我们可以通过标签的类型进行判断筛选
① 文本节点的类型： 3
② 注释的节点类型： 8
③ 标签节点的类型： 1

<script type="text/javascript">
    var bodyNode = document.getElementsByTagName("body")[0];
    //查看父节点
    var parentNode = bodyNode.parentNode;
    alert("父节点的名称："+parentNode.nodeName);

    //获取所有的子节点，返回的是一个数组（注意：获取子节点的时候是包括了空文本或者是注释）
    var children = bodyNode.childNodes; 
    for(var i = 0 ; i<children.length ; i++){
        if(children[i].nodeType==1){
            alert("节点的名字："+children[i].nodeName+" 对象的类型:"+children[i].nodeType);    
        }
    }
    alert("第一个子节点："+bodyNode.firstChild.nodeName); 
    alert("最后一个子节点："+bodyNode.lastChild.nodeName); 

    //找兄弟节点 
    var inputNode = document.getElementById("userName");
    alert("下个兄弟节点："+inputNode.nextSibling.nodeName); //下一个兄弟节点
    alert("上一个兄弟节点："+inputNode.previousSibling.nodeName); 
</script>

<body>
    <input type="text" id="userName"/>
    <img src="1.jpg" /> 
</body>

5、 创建节点、插入节点、设置节点的属性
① document.createElement(“标签名”)：创建新元素节点
② elt.setAttribute(“属性名”, “属性值”)：设置属性
③ elt.appendChild(e)：添加元素到elt中最后的位置
④ elt.insertBefore(newNode, oldNode)：添加元素到elt中，child之前（elt必须是oldNode的直接父节点）
⑤ elt.removeChild(eChild)：删除指定子节点（elt必须是child的直接父节点）

<script type="text/javascript">
    var num = 1;
    function add(){
        var inputNode = document.createElement("input"); //创建一个指定标签名字的节点
        //setAttribute:设置节点的属性
        inputNode.setAttribute("type","button");
        inputNode.setAttribute("value","按钮"+num);
        num++;
        var bodyNode = document.getElementsByTagName("body")[0];
        bodyNode.appendChild(inputNode); //appendChild：添加子节点            
    }
</script>

<body>
    <input type="button" onclick="add()" value="添加"/>
</body>

6、添加附件

<script type="text/javascript">
    function addFile(){
        //创建一个tr对象
        var trNode = document.createElement("tr");
        //创建td对象
        var tdNode1 =  document.createElement("td");
        var tdNode2 =  document.createElement("td");
        tdNode1.innerHTML ="<input type='file'/>";
        tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";
        //把td的节点添加到tr节点上
        trNode.appendChild(tdNode1);
        trNode.appendChild(tdNode2);
        var tbodyNode = document.getElementsByTagName("tbody")[0];
        var lastRow = document.getElementById("lastRow");
        tbodyNode.insertBefore(trNode,lastRow);
    }
    //删除附件
    function delFile(aNode){
        var trNode = aNode.parentNode.parentNode;
        var tbodyNode = document.getElementsByTagName("tbody")[0];
        tbodyNode.removeChild(trNode);
    }
</script>

<body>
    <table>
        <tr>
            <td><input type="file"/></td>
            <td><a href="#" onclick="delFile(this)">删除附件</a></td>
        </tr> 
        <tr id="lastRow">
            <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>
        </tr>
    </table>
</body>

7、联动框

<script type="text/javascript"> 
    function showCity(){
        //维护一个二维数组存储省份对应的城市
        var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];         
        //获取省份对应的节点
        var provinceNode = document.getElementById("province");
        //获取省份选中的选项
        var selectIndex =  provinceNode.selectedIndex;
        //获取对应的城市
        var  cityDatas = citys[selectIndex];
        //找到city节点
        var cityNode = document.getElementById("city");

        /*
        //先清空city框所有option
        var children = cityNode.childNodes;
        for(var i = 0; i<children.length ; ){
            cityNode.removeChild(children[i]);
        }
        */

        //设置options的个数==相当于清空
        cityNode.options.length = 1 ;//保留城市

        //遍历对应的所有城市然后创建对应的option添加到city上
        for(var index=0;index<cityDatas.length;index++){
            var option = document.createElement("option");
            option.innerHTML = cityDatas[index];
            cityNode.appendChild(option);
        }
    }   
</script>

<body>
    省份：<select id="province" onchange="showCity()">
            <option>省份</option>
            <option>广东</option>
            <option>湖南</option>
            <option>广西</option>
        </select>
    城市：<select id="city"><option>城市</option></select>
</body>

8、通过JavaScript操作CSS样式

<script type="text/javascript">
    //产生一个四位的验证码
    function createCode(){
        var datas=['A','B','张','李','王','z','1','9'];//0-7：长度8
        var code = "";
        for(var i = 0 ; i<4; i++){
            //随机产生四个索引值
            var index =  Math.floor(Math.random()*datas.length); //random产生在0.0-1.0之间（不包括1.0）
            code+=datas[index];
        }   
        var spanNode = document.getElementById("code");
        spanNode.innerHTML = code;
        spanNode.style.fontSize ="24px";
        spanNode.style.color = "red";
        spanNode.style.backgroundColor="gray";
        spanNode.style.textDecoration = "line-through";
    }
    function ready(){
    createCode();
}
</script>

<body onload="ready()">
    <span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>
</body>

9、正则表达式
① 创建方式
◆ 方式1：/正则表达式/模式
◆ 方式2：new RegExp(“正则表达式”,模式);

② 正则表达式对象常用的方法
◆ test()：使用正则对象去匹配字符串，如果匹配成功返回ture，否则返回false
◆ exec()：根据正则表达式去查找字符串符合规则的内容

③ 模式
◆ g（全文查找出现的所有 pattern）
◆ i （忽略大小写）

<script type="text/javascript">
    var str = "hello123";
    var reg = /^[A-Z0-9]+$/i;
    //^：匹配输入字符串的开始位置 
    //$：匹配输入字符串的结束位置
    alert("匹配吗？"+reg.test(str));    

    //查找出三个字符组成的单词
    var str  ="da jia hao hao xue xi a";
    var reg = /\b[a-z]{3}\b/gi;//\b：单词边界匹配
    var line ="";
    while((line = reg.exec(str))!=null){
        document.write(line+"<br/>")
    }
</script>

10、练习

<script type="text/javascript">
    //检查用户名
    function checkName(){
        var inputNode = document.getElementById("userName");
        var spanNode = document.getElementById("userId");
        //获取输入框的内容
        var content  = inputNode.value;
        //用户名的规则： 六位的英文与数字组成。数字不能开头
        var reg = /^[a-z][a-z0-9]{5}$/i;   
        if(reg.test(content)){
            //符合规则
            spanNode.innerHTML = "正确".fontcolor("green");

            return true;
        }else{
            //不符合规则
            spanNode.innerHTML = "错误".fontcolor("red");

            return false;
        }   
    }
    //检查邮箱
    function checkEmail(){
        var email = document.getElementById("email").value;
        var spanNode = document.getElementById("emailspan");

        //编写邮箱的正则       [email protected]  [email protected]  [email protected]
        var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i; 
        if(reg.test(email)){
            //符合规则
            spanNode.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            //不符合规则
            spanNode.innerHTML = "错误".fontcolor("red");

            return false;
        }   
    }
    function checkAll(){
        var userName = checkName(); 
        var email = checkEmail();
        if(userName&&email){
            return true;
        }else{

            return false;
        }
    }
//表单提交的时候是会触发onsubmit事件的，如果onsubmit事件的方法返回是true，那么该表单允许提交，如果返回的是false，该表单不允许提交。
</script>

<body>                              
<form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->
            <table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
                <tr>
                    <td width="25%">姓名:</td>
                    <td>
                        <input type="text" name="userName" id="userName" onblur="checkName()"/>
                        <span id="userId"></span>
                    </td>
                </tr>
                <tr>
                    <td >密码:</td><td>
                        <input type="password"  name="pwd" id="pwd" onblur="checkPass()"/>
                        <span id="passId"></span>
                    </td>
                </tr>
                <tr>
                    <td>确认密码:</td><td>
                <input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" />                     <span id="ensure"></span>
                    </td>
                </tr>
                <tr>
                    <td>邮箱</td><td>
                        <input type="text" name="email" id="email" onblur="checkEmail()"/>
                        <span id="emailspan"></span>

                    </td>
                </tr>
                <tr>
                    <td>性别</td><td>
                        <input type="radio" checked="ture" name="gender" id="male" value="male"/>
                    男
                        <input type="radio" name="gender" value="female"/>
                    女</td>
                </tr>
                <tr>
                    <td>爱好:</td><td>
                        <input type="checkbox"  name="like" />
                    eat
                        <input type="checkbox" name="like" />
                    sleep
                        <input type="checkbox" name="like"/>
                    play  
                    <span id="hobbySpan"></span>
                    </td>
                </tr>
                <tr>
                    <td>城市</td><td>
                    <select name="city" id="city">
                        <option value=""> 请选择</option>
                        <option value="bj"> 北京 </option>
                        <option value="gz"> 广州 </option>
                        <option value="sh"> 上海 </option>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td><td>                   <textarea cols="15" rows="5"  name="myInfo" id="myInfo"></textarea></td>
                </tr>
                <tr align="center">
                    <td colspan="2"><!--提交按钮-->
                    <input type="submit"/>
                    </td>
                </tr>
            </table>
        </form>
</body>

猜你喜欢

转载自blog.csdn.net/Mr_GaoYang/article/details/81530630
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022