脚本宝典收集整理的这篇文章主要介绍了DOM操作词典大全——今日词条:事件基础,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端。 致力于尽可能详细且简洁的介绍前端知识、自己的捷径,也是学习路上的记录。欢迎探讨
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
简单理解∶触发—响应机制。
事件三部分组成:事件源、事件类型、事件处理程序
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
elemen.innerText:从起始到终止位置的内容,但去除HTML标签、空格、换行
element.innerHTML:从起始到终止位置的全部内容
var di = document.querySelector('div');
btn.onclick = function () {
// di.innerText='2022';
di.innerHTML = getDate();
}
注意: innerText 不识别HTML标签
div.innerText = '<strong>双</strong>十一';
innerHTML 识别HTML标签
div.innerHTML = '<strong>双</strong>十一';
如果样式修改较多,可以采取操作类名方式更改元素样式。
class因为是个保留字,因此使用className来操作元素类名属性
className会直接更改元素的类名,会覆盖原先的类名。
element.style 行内样式操作,权重较高
element.className 类名样式操作
div {
width: 200px;
height: 200px;
background-color: red;
}
.change {
width: 400px;
height: 400px;
background-color: blue;
}
<div>
文本
</div>
<!-- element.className 类名样式操作 -->
<script>
var div = document.querySelector('div');
div.onclick = function () {
// this.style.backgroundColor = 'purple';
this.className = 'change';
}
</script>
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
元素节点nodeType为1 //主要操作对象
属性节点nodeType为2
文本节点nodeType 为3(文本节点包含文字、空格、换行等)
节点层级:利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
父级节点:node.parentNode:获取的是离元素最近的父节点,没有父节点返回null
子节点:parentNode.childNodes(标准):返回包含指定节点的子节点的集合,该集合为即时更新的集合。
子节点:parentNode.children (非标准):parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回(这个是我们重点掌握的)。
虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
var erweima = document.querySelector('.erweima');
//父级节点:node.parentNode
erweima.parentNode; //获取的是离元素最近的父节点,没有父节点返回null
//子节点:parentNode.childNodes(标准)
//
var ul = document.querySelector('ul');
console.log(ul.childNodes);
//子节点:parentNode.children(非标准)
console.log(ul.children);
parentNode.firstChild :返回第一个子节点,找不到返回null,同样是所有节点
parentNode.firstElementChild 返回第一个子元素节点(IE9以上)
parentNode.lastChild :返回最后一个子节点,找不到返回null,同样是所有节点
parentNode.lastElementChild 返回最后一个子元素节点(IE9以上)
实际开发的写法既没有兼容性问题又返回第一个子元素
// parentNode.firstChild :返回第一个子节点,找不到返回null
var ol = document.querySelector('ol');
console.log(ol.firstChild);
//parentNode.firstElementChild 返回第一个子节点,IE9以上
console.log(ol.firstElementChild);
// parentNode.lastChild :返回最后一个子节点
console.log(ol.lasttChild);
//parentNode.firstElementChild 返回最后一个子节点,IE9以上
console.log(ol.lastElementChild);
//实际开发的写法既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);//最后一个
node.nextSibling:获取下一个兄弟节点,没有返回null,包含所有节点
node.previousSibling:获取上一个兄弟节点,没有返回null,包含所有节点
node .nextElementSibling :返回当前元素下一个兄弟元素节点,找不到则返回null(IE9以上)
node.previousElementsibling :返回当前元素上一个兄弟元素节点,找不到则返回null。(IE9以上)
// node.nextSibling:获取下一个兄弟节点,没有返回null,包含所有节点
var div = document.querySelector('div');
console.log(div.nextSibling);
//node.previousSibling:获取上一个兄弟节点,没有返回null,包含所有节点
console.log(div.previousSibling);
// node .nextElementSibling
//nextElementSibling返回当前元素下一个兄弟元素节点,找不到则返回null。
console.log(div.nextElementSibling);
// node.previousElementsibling :返回当前元素上一个兄弟元素节点,找不到则返回null。
console.log(div.previousElementSibling);
创建和添加元素节点 document.createElement ('tagName ') :创建和添加元素节点,创建由tagName指定的 HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
document.write('<div>123</div>'); :创建元素
//是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
node .appendChild(child) :添加元素节点,将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
node .insertBefore(child,指定元素):将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。
//document.createElement ('tagName ') :创建元素节点
var li = document.createElement('li');
// node .appendChild(child) :添加元素节点
var ul = document.querySelector('ul');
ul.appendChild(li);
// node .insertBefore(child,指定元素)
var lili = document.createElement('li');
ul.insertBefore(li,ul.children[0]);
删除节点
node. removeChild (child):方法从DOM中删除一个子节点,返回删除的节点。
阻止链接跳转需要添加 javascript:void(0); 或者(javascript: ;)
复制节点
node.cloneNode () 返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
node.cloneNode();括号为空或者里面是false浅拷贝只复制标签不复制里面的内容 node.cloneNode(true);括号为true 深拷贝复制标签复制里面的内容
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法∶
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
(1)require是CommonJS语法,import是ES6语法; (2)require只在后端服务器支持,import在高版本浏览器及Node中都可以支持; (3)require引入的是原始导出值的复制,import则是导出值的引用; (4)require时运行时动态加载,import是静态编译; (5)require调用时默认不是严格模式,import则默认调用严格模式.
1、原型的概念 JavaScript的象中都包含了一个 [proto] 内部属性,这个属性所对应的就是自身的原型 2、原型链的概念 当一个对象调用自身不存在的属性/方法时,就会去自己 [proto] 关联的前辈prototype 对象 上去找,如果没找到,就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推,直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”。
听说你不点赞评论?🤳
本期到这里就结束了,感谢阅读!有问题留言,及时回复
以上是脚本宝典为你收集整理的DOM操作词典大全——今日词条:事件基础全部内容,希望文章能够帮你解决DOM操作词典大全——今日词条:事件基础所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。