常见Dom操作有哪些?

 

这里是修真院前端小课堂,本篇分析的主题是

【 常见Dom操作有哪些?】

大家好,我是IT修真院深圳分院第02期学员,一枚正直善良的web程序员。

今天给大家分享一下,修真院官网JS任务2中常见DOM操作有哪些?

1.背景介绍

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

 

2.知识剖析

2.1DOM是什么?

DOM是Document Object Model(文档对象模型)的缩写。DOM就是一个编程接口,就是一套API,是针对HTML文档、XML等文档的一套API。

DOM用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。JavaScript可以通过DOM来访问和操作HTML文档所有的元素。JavaScript是一种脚本语言,DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。

2.2什么是DOM节点?

HTML文档中的所有内容都是节点

整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

每个HTML属性是属性节点

注释是注释节点

 

3.常见问题

常见的DOM操作有哪些?

 

4.解决方案

4.1常用的查找节点的方法有:

document.getElementById('id属性值');返回拥有指定id的对象的引用

document.getElementsByClassName('class属性值');返回拥有指定class的对象集合

document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合

4.2常用的新建节点的方法有:

document.createElement('元素名');创建新的元素节点

document.createAttribute('属性名');创建新的属性节点

document.createTextNode('文本内容');创建新的文本节点

4.3常用的添加新节点的方法有:

1.element.setAttribute(attributeName, attributeValue );给元素增加指定属性,并设定属性值

2.element.setAttributeNode(attributeName );给元素增加属性节点

3.如需向HTML DOM添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

1)document.createTextNode('新增文本内容');创建新的文本节点

2)parent.appendChild(创建的新节点);向父节点的最后一个子节点后追加新节点,或使用parent.insertBefore(newChild, existingChild );向父节点的某个特定子节点之前插入新节点

4.4常用的删除节点的方法有:

parentNode.removeChild(existingChild );删除已有的子节点,返回值为删除节点

DOM需要清楚你需要删除的元素,以及它的父元素。常用的解决方案:找到你希望删除的子元素,然后使用其parentNode属性来找到父元素:

var child=document.getElementById("p1");child.parentNode.removeChild(child);

4.5常用的修改节点的方法有:

parentNode.replaceChild(newChild, existingChild );用新节点替换父节点中已有的子节点

element.setAttribute(attributeName, attributeValue );给元素增加指定属性,并设定属性值(若原元素已有该节点,此操作能达到修改该属性值的目的)

element.setAttributeNode(attributeName );给元素增加属性节点(若原元素已有该节点,此操作能达到修改该属性值的目的)

 

5.编码实战

demo

 

6.更多讨论

常见的DOM -事件又哪些?

onclick事件——当用户点击时

onload事件——用户进入

onunload事件——用户离开

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup事件——鼠标抬起

HTML DOM事件

 

7.参考文献

菜鸟教程-HTML DOM教程

DOM常用操作- GraceZy -博客园

 

8.视频资料

视频链接

PPT
 

发布了750 篇原创文章 · 获赞 1060 · 访问量 58万+
展开阅读全文

没有更多推荐了,返回首页

分享到微信朋友圈

×

扫一扫,手机浏览