恶补web之七:html DOM知识
html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准:
w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更新文档内容,结构和样式.
dom标准被分为3个不同部分:
1.核心dom - 针对任何结构化文档的标准模型
2.xml dom - 针对xml文档的标准模型
3.html dom - 针对html文档的标准模型
xml dom定义了xml元素对象和属性,以及访问它们的方法
html dom定义了所有html元素的对象和属性,以及访问它们的方法,换言之,html dom是关于如何获取,修改,添加或删除html元素的标准.
html dom中,所有事物都是节点,dom被视为节点树的html.根据w3c的dom标准,html文档中所有内容都是节点:
1.整个文档是一个文档节点
2.每个html元素是元素节点
3.html元素内的文本是文本节点
4.每个html属性是属性节点
5.注释是注释节点
html dom将html文档视作树结构,这种结构被称为节点树,通过dom,树中所有节点均可通过js访问,所有节点元素均可被修改,也可创建或删除节点.
节点树中的节点彼此拥有层级关系:父,子,同胞等:
1.节点树中,顶端节点称为根
2.每个节点有父节点,除了根
3.一个节点可拥有任意数量的子
4.同胞是拥有相同父节点的节点
dom处理中常见错误是希望元素节点包含文本.
方法是我们可以在节点(html元素)上执行的动作.以下是常用的dom对象方法:
getElementById()方法返回带有指定id的元素
appendChild(node) 插入新的子节点
removeChild(node)删除子节点
下面是常用的dom属性:
innerHTML 节点的文本值
parentNode 节点的父节点
firstChild和lastChild 不用解释吧
childNodes 节点的子节点
attributes 节点的属性节点
length属性定义节点列表中节点的数量
getElementsByTagName 返回带有指定标签的所有元素:
var x = document.getElementsByTagName("p"); 选取文档中的所有 p 节点.可以通过下标访问这些节点比如访问第二个节点:item = x[1];
getElementsByClassName 返回相同类名的所有html元素
html dom允许你在事件发生时执行代码
如果删除html元素,必须清楚该元素的父元素
html dom允许用js向html元素分配事件:
document.getElementById("id").onclick = function(){displayDate()};
以上代码将displayDate函数分配给了id为id的html元素的onclick回调.
当用户进入或离开页面时,会触发onload和onunload事件;
onchange事件可以用于输入字段的验证
onmouseover和onmouseout可用于在鼠标指针移动到或离开元素时触发函数;
onmousedown,onmouseup以及onclick事件是鼠标点击全部过程,鼠标按钮点击时触发onmousedown事件,当鼠标松开时触发onmouseup事件,最后当鼠标完成点击时,触发onclick事件.
document.documentElement - 全部文档
document.body - 文档主体
web APIs和DOM的介绍 web api是浏览器提供的一些方法,因为JavaScript本身是无法操作页面的,如更改元素内容,更改元素样式等,所以为了JavaScript能够操作页面上的元素,W3C就制定了一个标准(web api)。其实要求浏览器提供一系列的方法或者事件,让JavaScript能够操作页面上的元素。
提升对前端的认知,不得不了解Web API的DOM和BOM 在现代的开发中,vue和react都是很流行的开发框架,框架虽好用,但是框架的原理还是基于 DOM 操作去实现。如果一个前端工程师只会框架,不会 DOM ,那基本上是很容易被淘汰的。因为框架的存活时间我们谁也说不准,且技术更新迭代也特别快,说不定三五年就会被淘汰了都有可能。所以,扎实的学会 js 的基础原理,不要被框架和一些外部事件所迷惑,对自己会有一个更好的竞争力提升。 本文将讲解 JS 中 Web API 的 DOM 和 BOM 操作。
相关文章
- Web Service——面向服务编程的方式之一
- Grid++Report实现Web报表
- 阿里宣布开源Weex,用Web方式开发Native性能体验应用
- Web 开发中 Ajax 的 Session 超时处理
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part1
- web.config配置文件中的configSource属性
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- [Web Worker] Introduce to Web Worker
- 使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
- ASP.NET Web Pages - HTML 表单
- Java Web文件上传原理分析(不借助开源fileupload上传jar包)
- Atitit.web三编程模型 Web Page Web Forms 和 MVC
- 001-web基本程序搭建
- 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码
- python web py入门(56)- jQuery - HTML与JS代码分离
- python web py入门(33)- 在HTML网页里嵌入JavaScript脚本
- 【Web测试】各类web控件测试点汇总,软测人必备
- HTML(一)html书写规则、基础元素、功能元素
- 【WEB前端进阶之路】 HTML 全路线学习知识点梳理(下)
- 【WEB前端进阶之路】 HTML 全路线学习知识点梳理(上)
- Web前端 | HTML表单form
- html一个案例学会所有常用HTML(H5)标签