JavaScript DOM总结笔记

萌芽笔记 专栏收录该内容
26 篇文章 0 订阅

DOM编程艺术总结笔记

hi hi~这里是萌芽子!前几天萌芽读完了《JavaScript DOM编程艺术》跑来跟大家分享一下,全篇读起来很愉快萌芽来做个小总结!书里基本上都是围绕案例展开的非常易理解,还讲了关于平稳退化以及浏览器不支持JS的年代需要怎么应对,虽然在这个马上都2020年的时代已经不用担心浏览器禁用JS问题但是多多少少了解一下真的是很有趣!感兴趣的小伙伴可以看看。
【  扫盲:JavaScript是由  ECMAScript  +  DOM  +  BOM  的统称,本书主要描述DOM实例(Document Object Model 

  1. 节点
  2. 方法
  3. 性能

DOM节点

文档是由节点构成的集合:元素节点、文本节点、属性节点
像我们的<p>,<body>,<ul>之类的属于元素节点。
里面的内容比如说<p>hello,world!<p/>其中的hello,world!就是文本节点。
我们标签中的属性则为属性节点,是不是很好理解?
拿到这些节点我们就可以对他进行一个操控,也就是DOM操作。

DOM方法

获取节点

document.getElementById("intro")
document.getElementsByTagName("p")
document.getElementsByClassName("intro")

操作节点

getAttribute('title')          //获取属性
setAttribute('title','萌芽子')  //添加/更改属性
childNodes  //获取一个元素的所有子元素(注:返回的是个数组)
nodeType    //打印节点  1:元素  2:属性  3:文本
nodeValue   //获取节点的值(注:直接使用会返回当前元素节点的value而不是他的文本节点)
firstChild  //第一个元素(注:等价于childNodes[0])
lastChild   //最后一个元素

 传统方法

document.write()  //将字符串插入文档(注:不推荐)
innerHTML         //将字符串插入文档(注:推荐) 

DOM方法

createElement()   //创建元素
createTextNode()  //创建文本
appendChild()     //添加节点
insertBefore()  //添加到开始位置
removeChild()    //移除元素
replaceChild()   //替换元素(交换元素)

更改属性

document.getElementById("image").src="landscape.jpg";
document.getElementById('id1').style.color='red'

事件

onmousedown //鼠标点击
onmouseup   //鼠标释放
onclick     //完成点击
onload      //进入页面
onchange    //内容更改
onmouseover //鼠标悬停
onmouseout  //鼠标离开

监听器

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

element.removeEventListener("mousemove", myFunction);
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

性能考虑

1.尽量少访问DOM和尽量减少标记
我们要知道,只要是查询DOM中的某些元素,浏览器都会搜索 整个DOM树 从中查找可能匹配的元素。所以我们应该将重复用到的搜索结果保存在一个变量中,之后再重用该结果就能有效地减少重复搜索!

2.合并和放置脚本
如果一个页面要引入多个js文件推荐把这些文件合并到一个js文件当中,这样就可以减少加载页面时发送的请求数量
科普:位于<head>快中的脚本会导致浏览器无法进行加载其他文件。一般来说根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件,在下载脚本期间浏览器不会下载其他任何文件,所以推荐把js文件放入文档末尾,body标记之前,这样可以让页面变得更快,在加载脚本时,load事件依旧可以执行对文档进行的各种操作。

3.压缩脚本

压缩min版本会使代码执行速度更快。推荐工具webpack之类的打包工具都很好用的哟!

萌芽踩坑记

关于this指向

  <a href="" onclick="showPic();return false">图片1</a>
//return false 可以阻止默认行为

//如果不给参数此时的this指向Window(因为这时候showPic是全局函数,是通过window直接调用的)
 function showPic(){
        console.log(this)
}

但是如果这个时候给他传入this的话那么则指向当前元素。

<a href="" onclick="showPic(this);return false">图片1</a>

 function showPic(msg){
        console.log(msg)
}
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值