百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

如何记忆这些API

作者何力栋课程第十九天:找到那个DOM1392次浏览242018-05-14 22:53

这次的任务主要是,获取DOM节点的API的使用,虽说不多,但要熟练使用,你不仅要记住长什么样子(函数名),还得知道使用方式、参数、返回值。接下来说说我的心得。

从使用方式看

这几个方法和属性都通过‘.’操作符访问,‘.’左边是范围,右边是属性,比如:

 const $section = document.getElementById("section") // 从整个页面范围内获取id为“section”的div。

 const $span = $section.getElementsByTagName(“span”) // 从id为“section”的div中获取所有标签名为“span”的元素节点。

 const $sectionChild = $section.childNodes // 获取id为“section”的div的所有子节点。

从函数名看

函数名起的很直白,一眼就能看出来getElementById()是通过id名称来获取、getElementsByTagName()是通过标签名称(TagName)来获取,这两者有个不起眼的区别——Element后有无‘s’——这决定了返回值。

  • Element后没有‘s’,因为一个页面中只有一个id,所以只返回一个DOM节点。
  • Element后有‘s’,代表着返回值至少有一个DOM节点,因为一个页面中同名标签不止一个。

相同的,childNodes和parentNode也是一样,一个节点至少有一个子节点,至多一个父节点,参考父子关系~
但querySelector和querySelectorAll的区别是那个All了,前者是一个,后者是所有

从参数看

首先参数类型都是字符串类型,需要注意的是querySelector和querySelectorAll,它们像jq的$()一样强大,不局限于id或者TagName,传入的参数和css选择器一样,需要查找id为section的div时,不能像getElementById()一样传入“section”就行了,得加上个‘#’说明是通过id查询,相同的通过class也是一样,得加上一个‘.’。

在这次的任务中有一个需求是获取class=“active”的a标签,利用querySelector可以很容易实现

const $aActive = document.querySelector("a.active")

就像写css选择器一样方便~

从返回值看

  • 当返回的DOM节点至少有一个时,它的返回值是一个类数组对象,什么是类数组对象呢?先看看类数组对象长什么样子:

    {
      0: "a",
      1: "b",
      2: "c",
      4: "e",
      length: 5,
    }
    

    类数组对象的定义,就是拥有一个 length属性和若干索引属性的对象。碰巧获取DOM节点返回的类数组对象的key是从0开始的,我们可以很方便的使用for循环对类数组对象像遍历数组一样进行遍历,只是无法直接使用数组的方法,比如map(),push()等,不然就会报错。不过可以通过Function.call()间接使用,或者转化成真正的数组来使用。

  • 如果使用querySelector()获取至少一个的DOM的节点,将只返回页面中符合要求的第一个DOM节点。

  • 需要特别注意的是node.childNodes返回的内容。首先我们要明确几种常见的节点类型:

  1. 元素节点
  2. 属性节点
  3. 文本节点
  4. ......

在一些浏览器中(如chorme),空格、回车会被认为是一个文本节点——text,比如下面片段的div中就应该含有个5子节点(childNodes)
——3个文本节点(回车)、2个元素节点(span、p):

<div>    // 这里有个回车
    <span>sss</span>    // 这里有个回车 
    <p>aaa</p>       // 这里也有个回车
</div>

如果要获取单纯的元素节点,要使用node.children。

4条评论