简介

为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等。然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了(这是我个人情况,大神们肯定不是的)。

因此,最近一段时间,本人都是在重新温习原生的Javascript,发现好多知识点都已经遗忘了;做为一个想往上进步的前端程序猿,这肯定是不行的。所以,在这里梳理一下,最近复习的一些知识点。

DOM 操作

DOM 是 Document Object Model (文档对象模型)的缩写;HTML DOM 定义了所有HTML元素的对象和属性,以及访问他们的方法。换言之,HTML DOM是关于如何获取、修改、添加、或者删HTML元素的标准。

HTML DOM 节点树

在HTML DOM中,所有事物都是节点,DOM是被视为节点树的HTML。

  • 整个文档是一个文档节点
  • 每个HTML元素是元素节点
  • HTML元素内的文本是文本节点
  • 每个HTML属性是属性节点
  • 注释是注释节点

节点的关系构成

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

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

通俗一点讲:父级关系,子级关系,兄弟关系。

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

节点操作

节点类型(nodeType)

节点类型 | nodeType

---- | ----

元素节点 |1

document | 9

文本节点 | 3

注释节点 | 8

属性节点 |2

节点的查找操作

节点操作 操作解释
nodeNam 查看节点的属性名
nodeValue 查看节点的属性值
attributes 查看节点的属性
childNodes 获取某个节点的所有子节点(包括文本节点和注释节点)
children 获取某个元素下的所有的元素子节点(不包括文本节点和注释节点)
firstElementChild 查找某个元素的第一个子节点
lastElementChild 查找某个元素的最后一个节点
parentNode 查找某个元素的父节点
nextElementSibling 查找某个元素的下一个兄弟节点
prevElementSibling 查找某个元素的上一个兄弟节点
offsetParent 最近的有定位的属性的祖先节点,如果所有的祖先都没定位,那么默认body

节点的增删操作

节点操作 操作解释 注释
document.createElement() 创建元素节点 document.createElement('li')
appendChild() 向父级节点末尾插入元素节点 oUl.appendChild(li)
insertBefore() 在指定的子节点前面插入新的子节点。 oUl.insertBefore(newLi,oldLi)
removeChild() 删除父级中的某个元素 oUl.removeChild(oldLi)
replaceChild() 替换父级中的某个元素 oUl.replaceChild(newLi,oldLi)

节点的属性操作

节点操作 操作解释 注释
getAttribute() 获取元素属性的属性值 oDiv.getAttribute('name')
setAttribute() 设置元素属性的属性值 oDiv.setAttribute('name','div')
removeAttribute() 删除元素的某个属性 oDiv.removeAttribute('name')
innerHTML 读取修改元素内的所有代码 读:ODiv.innerHTML 、写:ODiv.innerHTML = ''
className 动态添加class oDiv.className = 'active'

获取节点的距离与宽高

操作 操作解释 注释
offsetWidth/offsetHeight 获取元素的宽高 计算边框与padding,不计算margin
clientWidth/clientHeight 获取元素的宽高 不计算边框与margin,计算padding
offsetLeft 元素的左外边框到有定位父级的左内边框的距离 如果所有的祖先都没定位,那么默认body
offsetTop 元素的上外边框到有定位父级的上内边框的距离 如果所有的祖先都没定位,那么默认body

关于表格的操作

操作 解释
table.tHead 获取表格头部
table.rows 获取tr
table.tFoot 获取表格底部
table.tBodies 获取表格主体
rows[i].cells 获取td

事件

event(事件) 对象

event事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存都一个指定的地方,供我们调用

兼容:
ie/chrom :event 是一个内置全局对象
火狐 :event是事件函数的第一个传入参数
function(ev){
var ev = ev || event
} 对象属性
clientX / clientY:鼠标相对于可视区的位置
事件冒泡
当一个元素接收到事件的时候,会吧它接受到的所有传播给它的父级,一直当顶层window
阻止冒泡:
event.cancelBubble = true;
给同一个对象绑定多个不同的函数
ie:obj.attachEvent('onclick',function);
1、没有捕获
2、this指向是window
3、标准是正序,其余是倒序
标准:obj.addEventListener('click',function,false);
1、有事件捕获
2、this指向当前对象
3、执行时正序
4、事件没有on
取消绑定事件:
标准:obj.removeEventListener(事件名,事件函数,是否捕获);
ie:obj.detachEvent('onclick',function);
call方法:函数下的一个方法
call方法第一个参数可以改变函数执行过程中的指向
键盘事件:
onkeydown:当键盘按下的时候触发,如果不抬起,那么会连续触发
onkeyup:当键盘抬起的时候触发
event.keyCode :数字型,键盘的键值
ctrlKey,shiftKey,altKey 布尔值
事件默认行为:
当一个事件发生的时候,浏览器自己会默认做的事件
阻止默认行为:
a、return false;
右键菜单:
oncontextmenu

焦点事件

onfocus :获取焦点
onblur : 失去焦点
obj.focus() :给指定的元素设置焦点
obj.blur():取消指定元素的焦点
obj.select()

原文 http://blog.hawkzz.com/2017/06/11/前端学习记录之Javascript-DOM/  作者 hawk_zz

前端学习记录之Javascript-DOM的更多相关文章

  1. 前端学习记录 week 1

    前端学习记录 week 1 基础知识 CSS盒模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封 ...

  2. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  3. 前端学习笔记之JavaScript

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...

  4. 前端学习实践笔记--JavaScript深入【3】

    这章主要讨论闭包和原型,以及面向对象和继承. 闭包 闭包充分利用了JS里面作用域的概念,作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量.使用闭包主要是为了读取函数内部的变量或者将函数内部 ...

  5. 前端学习实践笔记--JavaScript深入【2】

    趁热继续再来学习一波,接下来主要介绍函数,object,数组,面向对象,new实例化. 在介绍“对象”之前,首先得梳妆打扮一番吧,那这梳妆打扮主要有两条路线,一条是淑女范(利用函数对象化),一条是邻家 ...

  6. 前端学习实践笔记--JavaScript深入【1】

    这一年中零零散散看过几本javascript的书,回过头看之前写过的javascript学习笔记,未免有点汗颜,突出“肤浅”二字,然越深入越觉得javascript的博大精深,有种只缘身在此山中的感觉 ...

  7. 前端学习笔记之HTML DOM操作

    HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).   DOM节点类型 文档节点 (document,唯一) 元素节点 (那些个标签div ...

  8. Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...

  9. 前端学习记录(HTML篇)

    HTML Hyper Text Markup Language,超文本标记语言,不是一种编程语言,而是一种标记语言 思想:网页中有很多数据,不同的数据可能需要不同的显示效果,一个标签相当于一个容器,想 ...

随机推荐

  1. Git命令(1)

    windows中文乱码: http://www.cnblogs.com/Gukw/archive/2012/01/16/2323417.html 学习地址 :http://www.liaoxuefen ...

  2. 极化码之tal-vardy算法(3)

    考完驾照,回来填坑 /doge/doge 前两节分别介绍了tal算法中的合并函数和信道操作两个部分,我们将高斯信道的应用放在最后一节来介绍. 在之前的介绍中,我们一直在一个前提下进行讨论--即输入字符 ...

  3. hdu4821 String

    您也可以在我的个人博客中阅读此文章:跳转 题意 一个字符串S 问其中有几个子串能满足以下条件:1.长度为m*l2.可以被分成m个l长的不同的子串问题就变成了如何快速的判断着m个子串是否存在相同的 思路 ...

  4. .NET采集数据,放入数据库总结

    第一次做采集Json的还简单一些但是XML的简直了......... JSON //采集数据 public string GetBetRecordToRepository()//随便你返回什么 { t ...

  5. Jvm加载jar包的顺序

    使用-XX:+TraceClassPaths或者在服务器上执行jinfo时,都能得到classpath包含的jar包,例如: java.class.path = local/aaa/lib/sprin ...

  6. 62、django之MTV模型(urls,view)

    今天就进入到python最重要的阶段了django框架,框架就像胶水一样会将我们前面学的所有知识点粘合在一起,所以以前有哪些部分模糊的可以看看前面的随笔.本篇主要介绍djangoMTV模型,视图层之路 ...

  7. 关于NOIP2014“无线网络发射器选址”一题的衍生题目的思考及思维方向

    无线网络发射器选址 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南北向街道所形 ...

  8. Pyhton编程(四)之基本数据类型-字符串详解

    一:字符串是什么? 字符串是Python最常用的一种数据类型,虽然看似简单,但能够以不同的方式来使用它们. 字符串就是一系列的字符,在Python中,用引号括起来的都是字符串,其中的引号可以是单引号, ...

  9. 微信小程序点击返回顶层实现方法

    最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" sc ...

  10. Java规范推荐

    Java规范推荐 推荐:http://blog.csdn.net/tristansmile/article/details/7989670 命名规范 项目名:全部小写 Package 的命名:应该都是 ...