星空网 > 软件开发 > Java

JavaScript 基础第七天(DOM的开始)

一、引言

  JavaScript的内容分为三个部分,这三个部分分别是ECMAScript、DOM、BOM三个部分组成。所谓ECMAScript就是JavaScript和核心基础语法,DOM是文档对象模型,最后剩下的BOM则是浏览器对象模型。这三个部分相辅相成组成了现在的JavaScript。

 

二、导入

  前面几天我们学习就是有关有ECMAScript即基础语法部分,从今天开始我们将开始接触文档对象模型,做好准备。let's Go!

 

三、重点内容

  ① 什么是DOM:

  DOM= Document Object Model,文档模型对象,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或

  ② 节点:

  既然我们把它理解成一棵树那么树上就会有很多的枝叶,那么这些枝叶又是什么呢?这些枝叶我们称作为节点,因为数量很多所以又包括元素、属性、文本三部分。可以说在文档上的一切基本都是节点。

  ③ 页面元素的获取:

  我们想要操作页面元素的API那首先是不是应该获取呢?那获取的方式又有什么呢?

    a.getElementById:

<input type="text" value="默认的文字" id="txt"/><input type="button" value="按钮" id="btn"/><script>  // 第一种获取页面元素的方式 getElementById  var txt =  document.getElementById("txt");  console.log(txt);  console.log(txt.value);  txt.value="这是修改后的文字";  var btn = document.getElementById("btn");  console.log(btn);  console.log(btn.value);

 

     b.getElementByTagName:

<input type="text" value="123"/><input type="text" value="456"/><input type="text" value="789"/><input type="text" value="abc"/><input type="text" value="mmmm"/><input type="text" value="kkk"/><script>  // 获得页面元素的第二种方式 通过标签名 var inputs =  document.getElementsByTagName("input");  console.log(inputs);  for(var i=0;i<inputs.length;i++){//    console.log(inputs[i].value);    inputs[i].value = "aaaaa";  }</script>

    在这里需要注意的是通过getElementByTagName获得的内容是一个数组,即使只有一个元素也会是用数组表示。

    c.getElementByClassName:

<div ></div><p ></p><div ></div><p ></p><span ></span><script>  // 第三种获取页面元素的方式  var eles = document.getElementsByClassName("dv"); //获得的也是一组数据  console.log(eles);

    这个方式不推荐使用因为在兼容上会有一定的问题。

  ④ 事件:

    我们在获取了页面的元素后就需要对元素进行一定的操作了,我们通过给指定元素设置指定方式的方法来进行一定的操作。那么什么事件呢?事件就是文档或者浏览器窗口发生的一些特定的交互瞬间。 它分为两个部分触发和响应。

  ⑤ 事件的三要素:

    a.事件源

    b.事件名称

    c.事件处理程序

  ⑥ 注册事件:

    在指定方法前我们就需要注册事件,注册事件又分为以下的三种:

      a.行内式:直接在对应的标签上注册事件。

<a href="images/2.jpg" id="a2" onclick="turn2();return false;"><img src='/images/loading.gif' data-original="images/2-small.jpg" /></a>

 

        b.内嵌式:利用匿名函数的方式

<a href="images/1.jpg" id="a1" ><img src='/images/loading.gif' data-original="images/1-small.jpg" /></a><a href="images/2.jpg" id="a2" ><img src='/images/loading.gif' data-original="images/2-small.jpg" /></a><br/><img src='/images/loading.gif' data-original="images/placeholder.png"  width="600" id="img"/><script>  var img = document.getElementById("img");  var a1 = document.getElementById("a1");  var a2 = document.getElementById("a2");  a1.onclick = function(){    img.src = this.href;    return false;  }  a2.onclick = function(){    img.src = this.href;    return false;  }

 

       需要注意的是在这里还有一种方式是给时间设置监听者,但这里我们先不做介绍。

四、总结

    今天的内容就介绍这么多,主要的理解方面还是放在DOM的认识以及使用上。

 




原标题:JavaScript 基础第七天(DOM的开始)

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

想要进军亚马逊Amazon欧美市场?先搞定这些产品认证!:https://www.ikjzd.com/articles/129492
还是跨境电商人低调赚钱比较实在:https://www.ikjzd.com/articles/129493
Amy聊跨境:B2B与B2C模式,哪个更适合做跨境电商?:https://www.ikjzd.com/articles/129495
Amy聊跨境:B2B与B2C模式,哪个更适合做跨境电商?:https://www.ikjzd.com/articles/129496
2019年中国跨境电商市场规模首度突破10万亿大关:https://www.ikjzd.com/articles/129498
被无数外贸人哭惨的2020年,全球跨境电商业务飙升21%:https://www.ikjzd.com/articles/129499
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流