原生JS总结
前言
由于在活动期间,没使用关于js的第三方的库,用原生JS实现活动前端的逻辑,对一些原生函数存在不了解或者忘记的地方进行记录
原生DOM操作函数和属性
事件
addEventListener()
addEventListener()将指定的事件监听器注册到目标对象上,当目标对象触发制定的事件时,指定的回调函数就会触发。目标对象可以是 文档上的元素、 document、 window 或者XMLHttpRequest(比如onreadystatechange事件)。
IE8及以下不支持此方法且只有事件冒泡没有事件捕获。IE9开始支持此方法,也就有了事件捕获。
该方法需要传递三个参数:第一个参数
是事件名,第二个参数
是回调函数,第三个参数
为true表示捕获,false表示冒泡。
1 | let div = document.querySelector('#div'); |
removeEventListener()
这个事件是用来移除已绑定的事件,与addEventListener()绑定事件对应的就是移除已绑定的事件。第三个参数的布尔值代表解绑的是捕获事件还是冒泡事件。两个事件互不相关。
1 | var div = document.querySelector("#div"); |
注意:只能通过removeEventListener()解绑有名字的函数,对于绑定的匿名函数无法解除绑定。
1 | var div = document.querySelector("#div"); |
attachEvent()、detachEvent()
IE8及以下使用这两个方法绑定和解绑事件,当然,IE9+也支持这个事件。但这个方法绑定的事件默认为冒泡也只有冒泡。
1 | let div = document.querySelector("#div"); |
同时只能通过detachEvent()解绑有名字的函数,对于绑定的匿名函数无法解除绑定。
阻止默认事件和冒泡
标准事件和IE事件中的阻止默认事件和冒泡事件也有很大区别。
1 | let div = document.querySelector("#div"); |
IE8
及以下的event
是绑定在window
上的。
创建元素
创建元素:document.createElement()
使用document.createElement()
可以创建新的元素,这个方法接收一个标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。
1 | let div = document.createElement('div'); |
同时可以对元素添加自身的属性:
1 | div.id = "myDiv"; |
虽说创建了元素,但是此元素还没添加到文档里面去,我们可以使用appendChild()
、insertBefore()
等
创建文本元素:document.createTextNode()
使用document.createTextNode()来创建文本节点,这个方法接受一个参数:要插入节点的文本。与设置已有文本节点的值一样,作为参数的文本将按照HTML或XML的格式进行编码。
1 | document.createTextNode('helloWorld') |
DOM节点操作
appendChild()
appendChild()用于向childNodes列表的末尾添加一个节点,并且返回这个新增的节点。
1 | var child = document.body.appendChild(child); |
注意:
child 既是参数又是返回值
insetBefore()
insetBefore()可以将插入到指定的位置。该方法有两个参数:一个是将要插入的节点,另一个是作为参照的节点。插入节点后,被插入的节点变成参照节点的前一个同胞节点,同时被方法返回。 如果参照节点是null,则与appendChild()执行相同的操作。
1 | var insertedNode = parentNode.insertBefore(newNode, referenceNode); |
替换节点: replaceChild()
replaceChild()可以用于节点替换,该方法有两个参数:要插入的节点和被替换的节点,被替换的节点将会在文档中删除掉,同时返回被替换的节点,插入的节点占据被替换节点的原来的位置
1 | var oldNode = parentNode.replaceChild(newNode, oldNode); |
删除节点:removeChild()
removeChild()可以用于删除节点,该方法只有一个参数:需要删除的节点,从DOM中删除一个子节点,返回删除的节点。
1 | let oldChild = node.removeChild(child); |
克隆节点:cloneNode(true/false)
removeChild()用于复制节点,该方法只有一个参数:是否需要深度克隆的状态,返回调用该方法的节点的一个副本.
1 | let dupNode = node.cloneNode(deep); |
元素选择操作
querySelector、querySelectorAll(IE8及以上)
getElementById()
通过元素的ID来获取元素本身,由于id在html文档中是唯一的。同时该元素返回一个匹配特定ID的元素,id不存在,返回null
.
1 | let div = document.getElementById("div"); |
getElementsByTagName()
通过元素的标签名来获取元素节点,同时该元素返回含有同一个元素标签名的节点集合(HTMLCollection)
1 | let live = document.getElementsByTagName("p"); // 返回的元素是一个类数组 |
getElementsByName()
通过所有name属性匹配来获取元素节点,同时该方法返回含有同一个name属性名的元素节点集合(HTMLCollection)
1 | let live = document.getElementsByName("div"); // 返回的元素是一个类数组 |
getElementsByClassName()
该方法返回一个即时更新的(live) HTMLCollection,包含了所有拥有指定 class 的子元素。当在 document 对象上调用此方法时,会检索整个文档,包括根元素。(IE9以下不支持)
要匹配多个class,则className用空格分开。
1 | let live = document.getElementsByClassName("class1 class2"); // 返回的元素是一个类数组 |
属性操作
setAttribute()
用于在元素上添加一个新的属性,或者改变已存在属性的值。
1 | let div = document.getElementById("div"); |
getAttribute()
用于获取元素上的指定属性,该方法只有一个参数,指定的属性名;如果指定的属性不存在,则返回 null 或 “” (空字符串)(IE5+都返回null)。
1 | let div = document.getElementById("div"); |
注意:
IE7下不能正确返回class,返回的是null,其他正常。
removeAttribute()
该方法用于移除元素的属性。
1 | let div = document.querySelector('#div'); |
注意:
IE7下无法移除 class 属性
hasAttribute()
用于判断该元素是否含有该属性,返回一个boolean值。
注意:
IE7不支持该方法。
自定义属性data-*
这个是H5上包含data-*的自定义属性,
1 | let div = document.querySelector('#div'); |
文章外补充
getComputedStyle()、currentStyle()
当我们想获取元素计算后实际呈现在页面上的各个值,就用这两个方法。IE8及以下用currentStyle(),IE9+及其他标准浏览器用getComputedStyle()。
1 | var div = document.getElementById("div"); |
getBoundingClientRect()、getClientRects()
getBoundingClientRect()该方法获得页面中某个元素的上、右、下、左分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(到浏览器顶部而不是文档顶部)。该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。
getClientRects()是返回一个ClientRectList集合。
1 | var div1 = document.getElementById("div1"); |
本文由 Abert 创作,采用 知识共享署名 4.0 国际许可协议。
本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。