前端05.js入门之BOM对象与DOM对象。-阿里云开发者社区

开发者社区> 技术小胖子> 正文

前端05.js入门之BOM对象与DOM对象。

简介:
+关注继续查看

一、关于BOM对象。

BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

用于操控用户浏览器。


1.window对象:

所有浏览器都支持 window 对象。

    概念上讲.一个html文档对应一个window对象.

    功能上讲: 控制浏览器窗口的.

    使用上讲: window对象不需要创建对象,直接使用即可.


下面是window对象的常用方法:

alert()            显示带有一段消息和一个确认按钮的警告框。

confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。

close()            关闭浏览器窗口。

setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。

clearInterval()    取消由 setInterval() 设置的 timeout。

setTimeout()       在指定的毫秒数后调用函数或计算表达式。

clearTimeout()     取消由 setTimeout() 方法设置的 timeout。

scrollTo()         把内容滚动到指定的坐标。



交互示例:

方法讲解:    

        //----------alert confirm prompt----------------------------

    //alert('aaa');

    

    

    /* var result = confirm("您确定要删除吗?");

    alert(result); */

    //prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.

    // var result = prompt("请输入一个数字!","haha");

    // alert(result);

    方法讲解:    

        //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.

        //调用方式1

            //open("http://www.baidu.com");

        //参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.

            open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口

        //close方法  将当前文档窗口关闭.

            //close();

示例2:

var num = Math.round(Math.random()*100);

function acceptInput(){

//2.让用户输入(prompt)    并接受 用户输入结果

var userNum = prompt("请输入一个0~100之间的数字!","0");

//3.将用户输入的值与 随机数进行比较

        if(isNaN(+userNum)){

            //用户输入的无效(重复2,3步骤)

            alert("请输入有效数字!");

            acceptInput();

        }

        else if(userNum > num){

        //大了==> 提示用户大了,让用户重新输入(重复2,3步骤)

            alert("您输入的大了!");

            acceptInput();

        }else if(userNum < num){

        //小了==> 提示用户小了,让用户重新输入(重复2,3步骤)

            alert("您输入的小了!");

            acceptInput();

        }else{

        //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).

            var result = confirm("恭喜您!答对了,是否继续游戏?");

            if(result){

                //是 ==> 重复123步骤.

                num = Math.round(Math.random()*100);

                acceptInput();

            }else{

                //否==> 关闭窗口(close方法).

                close();

            }

        }

        

setInterval&clearInterval

<input id="ID1" type="text" onclick="begin()">

<button onclick="end()">停止</button>

<script>

    function showTime(){

           var nowd2=new Date().toLocaleString();

           var temp=document.getElementById("ID1");

           temp.value=nowd2;

    }

    var clock;

    function begin(){

        if (clock==undefined){

             showTime();

             clock=setInterval(showTime,1000);

        }

    }

    function end(){

        clearInterval(clock);

    }

</script>



setTimeout&clearTimeout:

var ID = setTimeout(abc,2000); // 只调用一次对应函数.

            clearTimeout(ID);

    function abc(){

        alert('aaa');

    }



2.History 对象(用来做页面后退)

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

length  返回浏览器历史列表中的 URL 数量。

back()    加载 history 列表中的前一个 URL。

forward()    加载 history 列表中的下一个 URL。

go()    加载 history 列表中的某个具体页面。


示例:

<a href="rrr.html">click</a>

<button  history.forward()">>>></button>

<button onclick="history.back()">back</button>

<button onclick="history.go()">back</button>




3.Location 对象(一般用来做页面的各种跳转)

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

location.assign(URL) #以链接的形式跳转,可返回上一个页面

location.reload()

location.replace(newURL)//注意与assign的区别 #直接覆盖当前页面。


二、DOM对象(DHTML)

1.什么是dom?

DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:

"W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

 

什么是 XML DOM?  ---->XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。

什么是 HTML DOM?---->HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法


2.关于dom节点的定义。

HTML 文档中的所有内容都是节点(NODE):

整个文档是一个文档节点(document对象)

每个 HTML 元素是元素节点(element 对象)

HTML 元素内的文本是文本节点(text对象)

每个 HTML 属性是属性节点(attribute对象)

注释是注释节点(comment对象)

wKiom1krqYmCUPN4AAJF8OPa_Yg575.png-wh_50

Document(整个html文档)

Element (文档中的标签)


节点(自身)属性:

attributes - 节点(元素)的属性节点

nodeType – 节点类型

nodeValue – 节点值

nodeName – 节点名称

innerHTML - 节点(元素)的文本值


导航属性:

parentNode - 节点(元素)的父节点 (推荐)

firstChild – 节点下第一个子元素

lastChild – 节点下最后一个子元素

childNodes - 节点(元素)的子节点 


parentElement              // 父节点标签元素

children                        // 所有子标签

  

firstElementChild          // 第一个子标签元素

lastElementChild           // 最后一个子标签元素

nextElementtSibling       // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素


节点树中的节点彼此拥有层级关系。

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

在节点树中,顶端节点被称为根(root)

每个节点都有父节点、除了根(它没有父节点)

一个节点可拥有任意数量的子

同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分,以及节点之间的关系:

wKioL1ktAFzQwvGhAAISy-sLlPg268.png-wh_50


访问 HTML 元素(节点),访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素:

页面查找:

通过使用 getElementById() 方法 

通过使用 getElementsByTagName() 方法 

通过使用 getElementsByClassName() 方法 

通过使用 getElementsByName() 方法 


局部查找:

<div id="div1">

    <div class="div2">i am div2</div>

    <div name="yuan">i am div2</div>

    <div id="div3">i am div2</div>

    <p>hello p</p>

</div>

<script>

   var div1=document.getElementById("div1");

////支持;

//   var ele= div1.getElementsByTagName("p");

//   alert(ele.length);

////支持

//   var ele2=div1.getElementsByClassName("div2");

//   alert(ele2.length);

////不支持

//   var ele3=div1.getElementById("div3");

//   alert(ele3.length);

////不支持

//   var ele4=div1.getElementsByName("yuan");

//   alert(ele4.length)

</script>


三、DOM Event(事件)

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。

ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习:输入框

onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

   鼠标按钮被按下。

   鼠标被移动。

    鼠标从某元素移开。

   鼠标移到某元素之上。

  鼠标从元素离开

onselect      文本被选中。

onsubmit      确认按钮被点击。


两种为属性添加事件的方式:

方式1:

<div onclick="alert(123)">点我呀</div>

<p id="abc">试一试!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){

        alert("hi");

    };

</script>


方式2:

<div id="abc" onclick="func1(this)">事件绑定方式1</div>

<div id="id123">事件绑定方式2</div>

<script>

    function func1(self){

        console.log(self.id)

    }


    //jquery下是$(self), 这种方式this参数必须填写;


//------------------------------------------

    var ele=document.getElementById("id123").onclick=function(){

         console.log(this.id);

        //jquery下是$(this), 这种方式不需要this参数;

    }

    

</script>


onload:

onload 属性开发中 只给 body元素加.

这个属性的触发 标志着 页面内容被加载完成.

应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>


    <script>

//          window.onload=function(){

//               var ele=document.getElementById("ppp");

//               ele.onclick=function(){

//                alert(123)

//            };

//          };




          function fun1() {

              var ele=document.getElementById("ppp");

               ele.onclick=function(){

                alert(123)

            };

          }


    </script>

</head>

<body onload="fun1()">


<p id="ppp">hello p</p>


</body>

</html>


onsubmit:


是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.


例:

<form id="form">

            <input type="text"/>

            <input type="submit" value="点我!" />

</form>


<script type="text/javascript">

            //阻止表单提交方式1().

            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.


            var ele=document.getElementById("form");

            ele.onsubmit=function(event) {

//                alert("验证失败 表单不会提交!");

//                return false;

                

            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。

             alert("验证失败 表单不会提交!");

             event.preventDefault();

Event 对象


Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。


事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.


比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode;



      本文转自苏浩智 51CTO博客,原文链接:http://blog.51cto.com/suhaozhi/1930687,如需转载请自行联系原作者





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery对象入门级介绍
本文由 伯乐在线 - kmokidd 翻译。未经许可,禁止转载!英文出处:smashingmagazine。欢迎加入翻译组。 你是否曾经见过像  $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下 $('#X') 是什么,如果看到这些你都觉得摸不着头脑,那请一定要读完这篇文章。如果你觉得上述的代码片段是不能正常工作的,那请先看一些jQuer
1607 0
使用lombok编写优雅的Bean对象
使用java编写代码,十之八九都是在写java类,从而构建java对象。lombok之前也说了不少,但使用了这么多年,感觉还是有很多技巧可以使用的。 毫无疑问,使用lombok,编写的java代码很优雅,而使用起来和普通的java编码方式创建的类毫无二致。
1247 0
前端实现旗帜飘动效果系列 (Ⅰ):dom+css实现
hello,民娜桑~~我又来开新坑了( ̄ε(# ̄)╰╮o( ̄皿 ̄///),这次尽量保证把这个坑填完~本系列我会分四篇来完成主题,分别是① DIV+CSS的实现,② canvas2D的简单实现,③ canvas2D的进阶实现,④ webgl+着色器的实现 以及 ⑤ 包装成jquery插件并发布为npm模块 。
3250 0
js前端日期格式化处理
js前端日期格式化处理 1.项目中时间返回值,很过时候为毫秒值,我们需要转换成 能够看懂的时间的格式; 例如: ​ yyyy-MM-dd HH:mm:ss 2.
1971 0
juqery和dom对象互换
一、jQuery对象与DOM对象相互转换 1.jQuery对象转DOM对象   Js代码   var $cr  = $("#cr");    //jQuery对象   //转换成DOM对象,索引号从0开始,选取对应节点   var cr = $cr[0];    //或 var cr = $cr.
757 0
13262
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载