DOM初步了解

zhangqh 发布于2019-08-23 17:15 / 653人阅读

摘要：什么是文档对象模型是针对和文档的一个应用程序编程接口。不好的地方，请多多指教

什么是DOM?

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。

节点层次

Sample Page

Hello World!

操纵节点

添加一个节点：appendChild() 和 insertBefore()

替换节点：replaceChild()

移除节点：removeChild()

查找元素

document.getElementById() 返回对拥有指定ID的第一个对象的引用

document.getElementsByTayName() 返回一个对所有tag标签引用的集合

document.getElementsByName() 返回 name 特性的所有元素，返回一个NodeList

document.getElementsByClassName() 获取类名，如果有多个相同类名，最终得到 NodeList

document.querySelector() 方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null

document.querySelectorAll() 可以对多个元素进行匹配和操作，并把它们存储在NodeList

设置元素样式

语法：ele.style.styleName = styleValue

功能：设置ele元素的css样式

例子：box.style.color = "#fff";

注：属性是减号连接的复合形式时，必需要转换为驼峰形式

DOM的操作特性

获取元素的属性：ele.getAttribute("attribute")

设置元素的属性：ele.setAttribute("attribute",value)

删除元素的属性：ele.removeAttribute("attribute")

创建元素

document.createElement()

document.body.appendChild() 将新创建的元素添加到文档body元素中


    1
    2

innerHTML

语法：ele.innerHTML = "html";

功能：获取和设置标签之间的文本和HTML内容

innerHTML 是 Element 对象的属性；

textContent 与 innerText

设置和获得标签的文本内容

textContent 是 Node 对象的属性；

innerText 是 HTMLElement 对象的属性；

注：innerHTML、textContent 与 innerText之间的区别，有兴趣的可以 Google 一下

className

为元素指定的CSS类，ele.className = "header";

小缺陷：设置元素class属性时，会替换元素原有的class的属性。当追加元素class属性时，可以这样操作：

   
   Hello World

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。

不好的地方，请多多指教

云服务器 GPU云服务器人工智能初步 hadoop初步学习计算机的初步学习了解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104057.html

jQuery（一）-- 初步了解

摘要：一初步了解介绍由创建于年一月的开源项目，凭借着跨平台的兼容性，简洁的语法，极大的简化了人员遍历文档，操作，处理事件，执行动画，和开发的操作。只建立一个名为的对象。对发生在同一个对象上的一组动作，可以直接连写无需重复获取对象。 jQuery（一）-- 初步了解 jQuery介绍由John Resig创建于2006年一月的开源项目，jQuery凭借着跨平台的兼容性，简洁的语法，极大的简...

quietin 2019-08-26 10:43 评论0 收藏0
初步整理的关于 Progressive Web Apps 的资料

摘要：在上看到发的视频被狂转开始注意之前几乎对这个词语没有印象看到是在的演讲还以为是新技术在上找一下这次好多个视频是关于的视频的内容主要是讲网站优化分别用做例子可惜没有大概要等小右补方案应该没有问题从视频看优化的效果非常显著本来好几秒的在 Twitter 上看到 Addy Osmani 发的视频被狂转, 开始注意https://twitter.com/addyosmani/status/7...

luffyZh 2019-08-19 18:24 评论0 收藏0
jointJS系列之一：jointJS的的初步使用

摘要：由于是基于的，因此对有一定的了解会对的理解和使用有较大帮助。由于是基于的，因此有视图和模型的概念。挂载的元素关联声明的元素的概念，就是图形显示的主体，可以有各种不同的形状，预设有常用的矩形椭圆平行四边形等。一、jointJS简介 jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。可以基于joi...

amuqiao 2019-08-23 10:56 评论0 收藏0
【page-monitor 前端自动化上篇】初步调研

摘要：前端自动化测试主要在于变化快，不稳定，兼容性复杂故而，想通过较低的成本维护较为通用的自动化比较困难。本文旨在通过获取和分析结构，调研能否通过监控和分析核心，来进行前端自动化测试。相关文章前端自动化中篇源码分析前端自动化下篇实践应用前端自动化测试主要在于：变化快，不稳定，兼容性复杂；故而，想通过较低的成本维护较为通用的自动化case比较困难。本文旨在通过page-monitor获取和分...

light 2019-08-20 10:11 评论0 收藏0
DOM的初步认识

摘要：是什么概述是个缩写，全称是。表示，就是将页面解析为一个文档，同时提供了对象。表示，就是中表示各个对象之间的关系。的作用用于解析页面文档，方便语言通过访问和操作页面中的内容。节点是什么节点作为树结构中的连接点，最终构成了完整的树结构 DOM DOM是什么概述 DOM是个缩写，全称是Document Object Model。D表示Document，就是DOM将HTML页面解析为一个文档...

李义 2019-08-23 11:32 评论0 收藏0