DOM常见的操作方式都有哪些?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM常见的操作方式都有哪些?相关的知识,希望对你有一定的参考价值。

参考技术A 大家好,我是IT修真院北京分院第22期的学员杨纲,一枚正直纯洁善良的WEB前端程序员

1.背景介绍

.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写。 DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 html DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。

2.知识剖析

1.什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。 http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_nodename

2.常见的DOM属性 属性是节点(HTML 元素)的值,您能够获取或设置。 innerHTML http://www.w3school.com.cn/tiy/t.asp?f=hdom_tablerow_innerhtml 属性 nodeName 属性 nodeName 属性规定节点的名称 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document

nodeValue 属性 nodeValue 属性规定节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值

三、常见问题

常见的DOM操作有哪些?

4.解决方案

1.访问元素的方法 通过使用 getElementById() 方法 通过使用 getElementsByTagName() 方法 通过使用 getElementsByClassName() 方法

2.修改元素的方法 改变 HTML 内容 document.getElementById("p1").innerHTML="New text!"; 改变 CSS 样式 document.getElementById("p2").style.color="blue"; 改html和css

追加子元素的方法 首先必须创建该元素(元素节点),然后把它追加到已有的元素上。var para=document.createElement("p"); 创建新的 HTML 元素 - appendChild() 在父元素的最后追加 创建新的 HTML 元素-element.insertBefore(para,child);在指定位置给父级追加子元素 删除 HTML 元素,您必须清楚该元素的父元素:parent.removeChild(child); 替换 HTML 元素:parent.replaceChild(para,child); 方法

5.编码实战

6.更多讨论

onclick 事件——当用户点击时

onload 事件——用户进入

onunload 事件——用户离开

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup 事件——鼠标抬起

7.参考文献

http://www.runoob.com/jsref/dom-obj-document.html

课后提问环节:

1.onmouseover和onmousemove的区别?婷婷

onmouseover是在鼠标放到上面的时候就触发一次函数,onmousemove是在目标上面每移动一点都会触发一次函数。

2.什么是attribute?杨梦桐

attribute是元素的属性,

比如这个

它的a.getAttribute("target")=_blank;

3.获取id和class的区别?李仁

document.getElementById("p1")

返回的是一个唯一的值,可以对id为p1的元素直接进行修改;

document.getElementsByClassName("p2")

返回的是一串数组,数组包含了所有className为p2的元素,想要对其中一项进行修改,必须加上[数字],比如下面

sbox[i].style.backgroundColor="#ffa500";

4.怎么获取节点名称?张雪飞

http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_nodename

5.onmouseover和hover有什莫区别?伊文秋

onmouseover可以实现hover的一切效果,并且因为他是执行一个函数,可以写出很多hover做不到的东西,例如onmouseover以后添加一个div盒子之类的。

6.为什么提取dom节点需要写document?韩筠宜

document是文档本身,一切的节点提取都是在提取document的内容。

7.用jquery写?王振

可以看这个里面的jquery写法。http://www.jquerycn.cn/a_4561

鸣谢

感谢大家观看

BY : 陈尚欢 | 韩阳| 杨纲

ppt链接:https://ptteng.github.io/PPT/PPT/js-02-DOM-manipulation.html#/

视频链接:https://v.qq.com/x/page/r0527rq9x36.html

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !

猛戳这里

关于AngularJS 框架的使用都有哪些经验值得分享

AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同,

对于 jQuery 等,一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版,然后通过模版像搭积木那样组合页面。

显然的,前者在 SEO 上有天然优势;而后者,搜索引擎还只能拿到某个模版,而无内容。
暂时没想到有什么特别好的解决方案,或许,对于内容页,可以继续使用传统方式,而只在需要更多交互的地方应用 AngularJS,特别是在移动端应用上。

同理适用于各种 前端的 MVC 框架,后端只要为前端提供数据接口,而不再需要为其拼接 HTML.

## 模块化

AngularJS 也是遵循 AMD 的。(AMD 是啥,参考:使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript)

虽然它也可以按照传统代码方式来写(其首页介绍的用法 AngularJS — Superheroic JavaScript MVW Framework),但是,既然都提供了这么一种模块的方法,为何不用上呢

angular.module('app', [
'moduleA',
'moduleB',
])
.controller('MainCtrl', [
'$scope',
function ($scope)

]);

而且,这种写法还可以方便做代码的合并与压缩,在后面 Grunt 自动化 一节中,就会提到使用 Nodejs/Grunt 来自动的做这些事情。

## 可复用模版 or 业务逻辑模版

今年 Google 开发者大会中 提到的 Polymer(Welcome - Polymer)
这货让人感觉像是 Angular Directives 的进化。

而 Directives 做的事,就是把一堆 DOM 封装为一条或者一组 自定义的 HTML标签,作为可复用的模版,以供组装业务调用。 Demos 可参看:Angular directives for Twitter's Bootstrap

当然,为了方便修改,很多时候在做 directive 的时候需要将 template 用 templateUrl 代替,
不用担心文件的碎片化,不利于前端加载 Grunt 自动化 一节 会提到如何合并这些碎片化的 模版。

Directives 是作为可复用的模版,
而业务逻辑则是一般是一个业务对应一个 html 及其的 controller.
参考技术A 1. 面向数据编程
使用angularjs的思路简单:1)界面元素绑定数据,2)操作处理数据

我用这个思路编写了一个冒泡算法的可视化,实现十分简单,想清楚如何绑定数据后,接下来的工作就只是操作处理数据了。
冒泡排序算法的可视化

相比如果使用jQuery,jQuery的思想是面向界面元素编程,简单的说如何定位和操作界面(网页)元素,大量精力放在了界面元素的操作上,而应该是重点的数据处理却在这个思路体系中占了很小的位置。

2. 可测试模块化编程
这个思路有两点,1)模块化 2)可测试

angularjs虽然可以很傻瓜式的编程,但是更加推荐的还是模块化编程,而且是可测试模块化编程。它的教程也一直把如何测试模块的方式也写了进去。

angularjs
刚出来的时候,最诟病的地方,就是测试困难,也是backbone和其他框架使用者对它的质疑。后来angularjs
team花了很大的精力去解释angularjs如何测试,如何依赖注入,如何提高angularjs的可靠性。后来把官方网站把所有的例子上,都包括了
相应的测试代码。很好的回应了难以测试的质疑。

angularjs,本身有很多模块,而且推荐以模块的形式编写angularjs插件。很大一块是教人如何写service,route和Declarative , 这些之间又是相互独立的模块,有可以把这些模块有机的组合在一起。

3. 前端模板引擎
angularjs本身是很好的前端模板引擎,未来发展就是后端的mvc产生json视图(view)作为前端的模型(model),而整个前端的mvc是后端的视图(view),中间通信就靠json。这样前后端高度解耦,可以完全达到模块化设计的要求。

这样前端只要知道后端产生数据的结构,给了一些数据样本,就可以直接开发了,而无需等待后端代码完成。
参考技术B AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同,

对于 jQuery 等,一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版,然后通过模版像搭积木那样组合页面。

显然的,前者在 SEO 上有天然优势;而后者,搜索引擎还只能拿到某个模版,而无内容。
暂时没想到有什么特别好的解决方案,或许,对于内容页,可以继续使用传统方式,而只在需要更多交互的地方应用 AngularJS,特别是在移动端应用上。

同理适用于各种 前端的 MVC 框架,后端只要为前端提供数据接口,而不再需要为其拼接 HTML.

## 模块化

AngularJS 也是遵循 AMD 的。(AMD 是啥,参考:使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript)

虽然它也可以按照传统代码方式来写(其首页介绍的用法 AngularJS — Superheroic JavaScript MVW Framework),但是,既然都提供了这么一种模块的方法

angular.module('app', [
'moduleA',
'moduleB',
])
.controller('MainCtrl', [
'$scope',
function ($scope)

]);

而且,这种写法还可以方便做代码的合并与压缩,在后面 Grunt 自动化 一节中,就会提到使用 Nodejs/Grunt 来自动的做这些事情。

## 可复用模版 or 业务逻辑模版

今年 Google 开发者大会中 提到的 Polymer(Welcome - Polymer)
这货让人感觉像是 Angular Directives 的进化。

而 Directives 做的事,就是把一堆 DOM 封装为一条或者一组 自定义的 HTML标签,作为可复用的模版,以供组装业务调用。 Demos 可参看:Angular directives for Twitter's Bootstrap

当然,为了方便修改,很多时候在做 directive 的时候需要将 template 用 templateUrl 代替,
不用担心文件的碎片化,不利于前端加载 Grunt 自动化 一节 会提到如何合并这些碎片化的 模版。

Directives 是作为可复用的模版,
而业务逻辑则是一般是一个业务对应一个 html 及其的 controller.
参考技术C 国内的确用的不多,但我们是一个,规模算大,用的人100左右,代码100w行以上,以后还会增加。十多个系统,金融类核心系统。经验个人积累一点,可能和做互联网应用尤其是spa不太一样。1.业务类系统,赶快用吧,代码量少一半一般,越复杂优势越明显2.性能很多坑,网上的方案不够用的,ie8下很多不能直接theangularway,延迟加载是王道,多次bootstrap也常有,直接改源码常有3.ui控件太少,完整套的要团队自己开发维护,个性化需求更需要从最底层定制4.官方的检验机制要吃透,复杂检验需求变化很多,要设计足够灵活,用watch$error方式又有性能坑5.指令是个好东西,重客户端组件化的方向,要理解透,用好6.模型设计上,服务端的贫血,充血之分这里可以借鉴。另外模型分类命名空间很重要如果你的页面不复杂,就没那么多讲究了最后,seo的,建议html两套,angular有类似工具 参考技术D AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同,

对于 jQuery 等,一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版,然后通过模版像搭积木那样组合页面。

显然的,前者在 SEO 上有天然优势;而后者,搜索引擎还只能拿到某个模版,而无内容。
暂时没想到有什么特别好的解决方案,或许,对于内容页,可以继续使用传统方式,而只在需要更多交互的地方应用 AngularJS,特别是在移动端应用上。

同理适用于各种 前端的 MVC 框架,后端只要为前端提供数据接口,而不再需要为其拼接 HTML.

以上是关于DOM常见的操作方式都有哪些?的主要内容,如果未能解决你的问题,请参考以下文章

Python文件操作都有哪些方式?

MySQL中常见的连接查询方式都有哪些?

常见的操作系统都有哪些?

操作系统之 进程间通信的方式都有哪些

什么是DOS攻击,DOS攻击的命令都有哪些,攻击的方式都有哪些?

常见的分表方式 都有哪些,各自的优缺点