JS中的DOM知识概览

renweihub 发布于2019-08-20 17:32 / 2196人阅读

摘要：浏览器中另说查找元素注意及较低版本浏览器的怪癖会返回值为指定的元素。类型所有的元素都是通过类型或其自类型表示的，类型继承自类型。操作文本节点中的文本当两个文本节点相邻时，可通过将其变成一个文本节点。

1 Node类型

除IE外所有浏览器都可以访问这个类型（因为IE中的DOM对象都是以COM对象的形式实现的），而且js中的所有节点类型都继承自Node类型。

1.1 nodeName/nodeValue/nodeType 1.2 节点关系

childNodes 返回结果是Nodelist类型，不是数组。

   Nodelist是基于DOM结构动态查询的结果，DOM的变化能自动反映在查询结果中。可通过方括号进行访问，也可用item(i)进行访问。

   可通过Array。prototype.slice.call(nodelist,0) 将Nodelist类型转化成数组，也可以通过遍历Nodelist将其转化成数组。

firstChild/lastChild

nextSibling/previousSibling

parentNode

ownerDocument

 ownerDocument：所有节点都有的属性，指向表示整个文档的文档节点，任何节点都不能同时存在于多个文档中。通过这个属性可以直接访问文档节点，而不必层层回溯。

1.3 操作节点

appendChild()

insertBefore()

replaceChild()

removeChild()

1.4 新建／拷贝节点

拷贝：cloneNode()

当参数为true时，执行深拷贝，会将该节点的子节点也拷贝。但是这个函数不会复制添加到节点中的js属性，例如时间处理程序，这个只复制特性、子节点（指定true时）。（IE浏览器中另说）

1.5 查找元素(document./element.)

getElementById()

   注意IE7及较低版本浏览器的怪癖：会返回name值为指定‘ID’的input元素。

getElementsByTagName()

   返回的是HTMLCollection对象，是一个动态集合。

getElementsByName()

2 Document类型

document对象是HTMLDocument类型的一个实例，HTMLDocument继承自Document。并且，document对象是window对象的一个属性。

2.1 文档的子节点

documentElement属性直接指向html元素

body属性，指向body元素

doctype属性，指向文档声明标签

2.2 文档信息

title

domain

   不同子域的页面无法通过js通信，设为相同就可互相访问对方的js对象了。
   域名属性刚开始是松散的不能将它再设置为紧绷的。

URL

2.4 特殊集合

document.images 所有image元素

document.links 所有有href的a元素

document.anchors 所有带name特性的a元素

1.5 新建元素

createElement()

createTextNode()

createDocumentFragment()

createAttribute()

2.6 DOM 一致性检测

document.implementation.hasFeature()

一般不要相信这个的检测结果，因为可以自行修改结果。

2.7 文档写入

document.write()
document.writeln()

如果在文档加载完毕后写入会重写整个页面。

document.open()
document.close()

如果是在页面加载期间写入，则不需要用到这两个方法。

3 Element类型

所有的元素都是通过HTMLElementle类型或其自类型表示的，HTMLElement类型继承自Element类型。

getAttribute()

setAttribute()

removeAttribute()

   
   任何元素的所有特性，也都可以通过DOM元素的本身的属性来访问。
   只有公认的（不是自定义的）特性才会以属性的形式添加到DOM对象中。
   有些特性通过属性访问和getAttribute（）访问的结果可能不同，例如style特性和事件处理程序
   给元素添加自定义属性，该属性不会变成特性
   
   总而言之就是：自定义的特性不能通过属性的方式访问，自定义的属性不能通过getAttribute访问（应该是这样）。

attributes属性

  一般用来遍历特性时使用（element.attributes.length）

继承Node类型的childNodes等属性和创建，查找，添加删除子节点等方法。

4 Text类型

可通过nodeValue或data属性访问Text节点中包含的文本。

操作文本节点中的文本：

appendData（）
deleteData（）
replaceData（）
insertData（）
splitText（）

   当两个文本节点相邻时，可通过normalize()将其变成一个文本节点。normalize()是从node类型继承的函数

分割文本节点
textnode.splitText(5) 返回一个新文本节点，且该节点与原节点的parentNode相同

5 comment类型（注释） 6 DocumentFragment

在文档中没有标记。

文档片段永远不会成为文档的一部分。当通过appendchild将文档片段添加到文档中时，只是将文档片段的子节点添加到文档中，文档片段将会删除这些子节点。

当需要添加多个子节点时，如果一个一个添加，那么将会导致浏览器的反复渲染，这时可以将这些子节点添加到文档片段中，然后再添加到文档中。

7 动态添加脚本

7.1 动态添加脚本
7.2 动态添加样式
7.3 操作表格
7.4 NodeList

    最好将length的值保存在一个变量中，因为length的值是动态的。
    访问NodeList相当于一次基于文档的查询，所以要少访问NodeList，或将其存在缓存中。

GPU云服务器云服务器 js dom监听 js dom交换 js dom样式修改 js获取dom数据

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

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

Angular（01）-- 架构概览

摘要：正文架构概览正文架构概览接触大概一个月吧，期间写了个项目，趁现在稍微有点时间，来回顾梳理一下。里的模块，并不等同于项目中的模块概念。当然，这只是我目前阶段的理解。声明本系列文章内容梳理自以下来源： Angular 官方中文版教程官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。因为这系列文章，更多的会...

bitkylin 2019-04-23 11:46 评论0 收藏0
前端开发收集 - 收藏集 - 掘金

摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

ygyooo 2019-08-20 17:15 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
New Relic性能监控（三）浏览器端监控

摘要：性能概览下图为一个监控的的性能概览页面该页面主要包含下面几个部分的内容页面加载时间曲线得分图各浏览器的吞吐量会话追踪，错误，以及响应时间。吞吐量吞吐量是按浏览器的类型绘制的，单位是每分钟浏览量。 New Relic性能监控（三）浏览器端监控 2018-05-02 琅琊书生本系列文章基于公司使用New Relic的经验，鉴于国内较少有这方面的文章，因此把我工作中了解到的知识分享给大家，希...

Codeing_ls 2019-08-26 11:53 评论0 收藏0
New Relic性能监控（三）浏览器端监控

摘要：性能概览下图为一个监控的的性能概览页面该页面主要包含下面几个部分的内容页面加载时间曲线得分图各浏览器的吞吐量会话追踪，错误，以及响应时间。吞吐量吞吐量是按浏览器的类型绘制的，单位是每分钟浏览量。 New Relic性能监控（三）浏览器端监控 2018-05-02 琅琊书生本系列文章基于公司使用New Relic的经验，鉴于国内较少有这方面的文章，因此把我工作中了解到的知识分享给大家，希...

banana_pi 2019-08-15 15:48 评论0 收藏0