前端技术——DOM艺术

先知BOM,再知DOM



BOM <a href="#">BOM</a>




DOM*

  • javaScript中的DOM操作

    •   
  •  jQuery中的DOM操作
    •   

  • 基于JavaScript的DOM操作

DOM:文档对象模型,文档可以是.xml .html,那么 xmlDOM 和 htmlDOM是否有关系?

XMLDOM(其实就是一组可以操作xml文档的api说明)定义了访问和处理 XML 文档的标准方法

HTMLDOM文档格式 符合XML语法标准,所以可以使用XML DOM API

DOM模型中每个元素 都会被解析为一个节点Node,而常用的节点类型又分为

  • 元素节点  Element
  • 属性节点  Attr
  • 文本节点  Text
  • 文档节点  Document
htmlDOM 和 xmlDOM
文档类型 htmlDOM xmlDOM
针对性不同  主要针对.html文档 主要针对.xml文档
技术支持  用JavaScript来开发html DOM比较合适 一般用Java
     

说明:

  1. HTML DOM是对XML DOM的扩展
  2. 进行 JavaScript DOM开发时可以同时使用 XML DOM和 HTML DOM


(Document对象)Node-(Element|Test|Attribute对象)Node-



  每个载入浏览器的 HTML 文档都会成为 Document 对象

•常用属性

  –all[] 提供对文档中所有 HTML 元素的访问  FF不支持

  –forms[]返回对文档中所有 Form 对象引用

  –body  提供对 <body> 元素的直接访问

• 常用方法

  –getElementById():返回对拥有指定 id 的第一个对象的引用

  –getElementsByName():返回带有指定名称的对象集合

  –getElementsByTagName():返回带有指定标签名的对象集合

  –write()向文档写 HTML 表达式 或 JavaScript 代码



(Document对象)Node-(Element|Test|Attribute对象)Node-



常用属性

•nodeName

  –如果是元素节点,nodeName返回这个元素的名称

  –如果是属性节点,nodeName返回这个属性的名称

  –如果是文本节点,nodeName返回一个内容为#text 的字符串

•nodeType

  –Node.ELEMENT_NODE     --->-- 元素节点

  –Node.ATTRIBUTE_NODE  --->-- 属性节点

  –Node.TEXT_NODE           --->-- 文本节点

•nodeValue

  –如果给定节点是一个属性节点,返回值是这个属性的值

  –如果给定节点是一个文本节点,返回值是这个文本节点内容

  –如果给定节点是一个元素节点,返回值是 null

常见操作:增删改查

  •DOM 获取节点

  •DOM 改变节点

  •DOM 删除节点

  •DOM 替换节点

  •DOM 创建节点

  •DOM 添加节点

基于JavaScript的DOM操作,操作节点对象时,事件的处理是很有必要的,如果为DOM操作提供事件处理,会很有乐趣

  •鼠标移动事件 :mousemove | mouseout | mouseover

  •鼠标点击事件 :click | dblclick | mousedown | mouseup

  •加载与卸载事件 :load | unload

  •聚焦与离焦事件 :  focus | blur

  •键盘事件 : keydown | keyup | keypress

  •提交与重置事件 : submit | reset

  •选择与改变事件 : select | change

  • 基于jQuery的DOM操作


选择器(如果要用jQuery实现DOM的操作,那么必须依赖于选择器)


  • 基本选择器
  • 层次选择器
  • 过滤选择器
    • 基本过滤选择器
    • 内容过滤选择器
    • 属性过滤选择器
    • 子元素过滤选择器
    • 表单对象属性过滤选择器
    • 表单选择器


操作DOM


时间: 2024-10-18 18:32:56

前端技术——DOM艺术的相关文章

前端技术的发展和趋势

Web 发展了几十个春秋,风起云涌,千变万化.我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走.Web 技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创造.这几年的前端,更为之甚! 我从 12 年底开始接触前端,12 年之前的前端发展情况只能从上一辈的笔触中领会.本文会盘点从 09 年开始到 15 年间前端技术的革新,同时也会从多个角度,解读近几年前端技术发展的潜在因素,其中穿插了若干对前端演进的拙见,难免会有错误和疏漏,望读者可以补充和斧正. 那

前端技术-调试工具(上)

页面制作之调试工具 常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等.它们的功能与使用方法大致相似.Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试工具. 打开 Google Chrome 浏览器,通过下面任何一种方式进入开发人员工具: -点击位于浏览器用户界面右上角的"页面"下拉菜单,"更多工具"→"开发人员工具". -右键点击网页上的任一元素,在弹出菜单中选择&

前端技术-调试工具(下)

页面制作之调试工具 五.Profiles 这个主要是做性能优化的,包括查看CPU执行时间与内存占用等. 例述如下:原文地址:http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/. 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩JS和CDN,但是让代码执行的更快你要做的事情.代码中很小的改动都可能

2016 年前端技术

近几年前端技术盘点以及 2016 年技术发展方向 2016-01-09 10:33 by Barret Lee, 1175 阅读, 8 评论, 收藏, 编辑 Web 发展了几十个春秋,风起云涌,千变万化.我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走.Web 技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创造.这几年的前端,更为之甚! 我从 12 年底开始接触前端,12 年之前的前端发展情况只能从上一辈的笔触中领会.本文会盘点从 09 年开始到

最热web前端技术汇总

Web前段技术发展很快,主流技术日新月异,想想自己刚毕业那会用的asp技术,现在已经很少有主流网站在使用了. 再到后来的J2EE框架,然后SpringMVC大行其道,但是最近各种js框架被广为传播,Html5的推出很是丰富了移动互联网的发展,此文对当前最新的几种web前端技术进行的汇总,让大家更多地了解,然后取其所长,避其所短,快速推出简约大方,维护方便,性能良好的个人网站. JavaScript MV*框架 在相当长的一段时间里,每个程序员都要学会如何利用JavaScript来编写弹出一个警告

百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

React全栈--现代前端技术

React全栈–现代前端技术 1.ES6– 新一代JavaScript标准 1.1 const和let关键字 以前只有全局变量以及函数内部的局部变量,所以以前的局部变量只能定义在函数里面,但是现在不是了,可以通过let关键字来定义局部变量.同时通过const关键字来定义常量,定义后的基本类型数据是不能改变的,但是定义的是引用类型的变量的话,还是可以改变的. 1.2 函数 1.箭头函数,在回调中很有作用,箭头函数永远是匿名的 2.this在箭头函数中的使用:在嵌套函数中,碰到setInterval

D2 前端技术论坛总结(上)

得幸获得D2前端技术论坛门票一张,今天就去了,公司还给批假了(有可能不会算做请假,哈哈). 早上8点50出门,骑个小毛驴,大概9点30分左右,到了阿里巴巴西溪园区,很多人,进去的门口有专人接待,看D2门票,然后给贴一张阿里巴巴的logo贴纸在身上,然后我进去找了地方停小毛驴,突然发现贴纸不见了...估计给秋风给顺走了,于是立马赶回门口又给拿了一张 O(∩_∩)O哈哈~ 今天我一直呆在主会场,主会场的几场分享我给列列 10:30 张可竞<指尖上的数据> 13:30 林楠<nodejs一小步

近几年前端技术盘点以及 2016 年技术发展方向

作者: 阎王 Web 发展了几十个春秋,风起云涌,千变万化.我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走.Web 技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创造.这几年的前端,更为之甚! 我从 12 年底开始接触前端,12 年之前的前端发展情况只能从上一辈的笔触中领会.本文会盘点从 09 年开始到 15 年间前端技术的革新,同时也会从多个角度,解读近几年前端技术发展的潜在因素,其中穿插了若干对前端演进的拙见,难免会有错误和疏漏,望读者可以补