大家好,我是IT修真院北京总院第22期的学员张雪飞,一枚正直纯洁善良的web程序员;
今天给大家分享一下,修真院官网js任务2,深度思考中的知识点——DOM常见的操作方式有哪些?
1.背景介绍:
DOM是什么?
DOM 是 Document Object Model(文档对象模型)的缩写。
DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在 HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。
2.知识剖析
什么是DOM节点?
HTML 文档中的所有内容都是节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
3.常见问题
常见的DOM操作有哪些?
querySelector() 方法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。 如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
document.querySelector("#demo");
4.解决方案
getElementsByTagName() 方法
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
getElementsByClassName() 方法
获取所有指定类名的元素:
getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
getElementById() 方法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
5.编码实战
当点击鼠标按钮时,会触发onmousedown事件(改变背景色,改变文本内容),当释放鼠标按钮时,会触发onmouseup事件(改变背景色,改变文本内容)。
onmouseover事件——鼠标移入/onmouseout事件——鼠标移出该变文字内容
6.更多讨论
阿飞问:常见的DOM - 事件又哪些?
啊仁回答:onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
啊刚问:使用class该变元素文本内容?
啊飞回答:
getElementsByClassName();获取classde元素。
.innerHTML=" ";该变元素内容,该变后的内容放在双引号里。
阿纲问:怎样改变全部class的内容?
啊飞回答:
6:鸣谢
感谢 李仁,此教程在她技术分享的基础上完善而成!
------------------------------------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !