【JS学习笔记】JS对节点的操作（父节点，兄弟节点）
发布时间
阅读量：
阅读量
《HTML5权威指南》第25章‘理解DOM’基于文档的对象模型构成文档的各种组件。（1）Document对象。（2）Location对象。（3）Windows组件。（4）History记录。（5）Screen元素。（6）HTElement实例。（7）Text节点.DOM中的CSS属性和事件分为两部分处理：第一部分涉及CSS样式表声明机制；第二部分则聚焦于基于DOM的事件处理机制
Document对象
document对象中与节点操作有关的：
- childNodes：返回子元素的合集
- firstChild：返回某元素的第一个子元素
- forms：返回文中所有的forms对象
- getElementsById：
- getElementsByClassName：
- getElementsByName:
- getElementsByTagName:
- hasChildNodes()：如果有子元素则返回true
- head：返回代表head的元素
- images：返回所有代表img的对象
- lastChild：返回最后一个子元素
- links：返回所有代表文档中具备href属性的a和area元素的对象（集合）
- nextSibling：返回当前元素之后的兄弟元素（单）
- parentNode：返回父元素
- previousSibling：返回当前元素之前的兄弟元素（单）
- querySelector：返回匹配特定CSS选择器的第一个元素
- querySelectorAll：返回匹配特定CSS选择的所有元素
HTMLElement对象
- add method: 将指定类附加到元素上
- checking for: 检查是否存在指定类返回true
- removal process: 移除指定类相关属性
- toggle functionality: 实现状态反转（存在则删除）
- data retrieval: 返回所有data-开头的属性
- appending child element: 将目标HTML元素附加为当前元素子项
- inserting before: 插入到指定位置前的操作
实战
百度前端 2019年4月2日笔试题第二题：
以下是代码：
function output(str) {
var jsBlink = document.getElementById("jsBlink");
var pre = jsBlink.previousElementSibling; //获取节点之前的兄弟元素，推荐使用循环
while (pre) {
var parent = pre.parentNode;
parent.removeChild(pre);
pre = jsBlink.previousElementSibling;
}
//删除所有jsBlink之前的元素
let i = 0;
let len = str.length;
Interval(print, 200); //利用setTimeout实现setInterval
function Interval(func,wait) {
var interval = function () {
func.call(null);
setTimeout(interval,wait);
};
setTimeout(interval,wait);
}
function print() {
if (i < len){
var idColor = Math.round(Math.random()*23);
var sp = document.createElement("span");
sp.innerHTML = str.charAt(i);
sp.className = "wordcolor"+ idColor;
document.body.insertBefore(sp,jsBlink);
i++;
}
}
}
output("Js is so cool!")全部评论 (0)
还没有任何评论哟~