Javascript学习笔记5 DOM

最新推荐文章于 2020-11-16 16:11:42 发布
最新推荐文章于 2020-11-16 16:11:42 发布
阅读量360 收藏
点赞数
分类专栏： Javascript笔记 文章标签： DOM
本文为博主原创文章，转载请务必附上文章网址，谢谢。
本文链接：https://blog.csdn.net/zjw_python/article/details/79604906
版权

DOM：文档对象模型，针对HTML和XML文档的一个API，DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构

Node类型

所有的节点类型都继承自Node类型，每个节点都有个nodeType属性，表明节点的类型。
重要的类型包括：

  • Node.ELEMENT_NODE (1) 元素节点
  • Node.ATTRIBUTE_NODE (2) 属性节点
  • Node.TEXT_NODE(3) 文本节点
  • Node.DOCUMENT_NODE (9) 文档节点

属性

nodeType：保存着节点类型，例如，若是元素节点，该值等于1
nodeName：若是元素节点，那么则是标签名
nodeValue：若是元素节点，该值为null
childNodes：保存一个NodeList对象，可以通过方括号访问子节点。(子节点可能元素、文本节点、注释等，在遍历时务必注意判断节点类型)

var firstChild = someNode.childNodes[0];   //第一个子节点
var count = someNode.childNodes.length;  //子节点的数目

parentNode：指向文档树中的父节点
previousSibling 和 nextSibling：节点的前一个兄弟节点或后一个兄弟节点，没有则为null
firstChild 和 lastChild：节点的第一个子节点和最后一个子节点
ownerDocument：指向整个文档的文档节点

方法

hasChildNodes()：节点包含子节点时返回true
appendChild():追加一个子节点,成功则返回该节点

someNode.appendChild(newNode);

insertBefore():在某子节点之前插入新的子节点。接受两个参数，要插入的子节点和作为参照的子节点

someNode.insertBefore(newNode,someNode.firstChild);  //插入后成为第一个子节点

replaceChild():以新的子节点替换某子节点，接受两个参数，新的子节点和被替换的子节点，返回被替换的节点

someNode.replaceChild(newNode,someNode.lastChild); //替换最后一个子节点

removeChild()：移除子节点
cloneNode():复制某节点，接受一个布尔值参数，为true时表明为深复制，该节点及其子节点树也会被复制，否则只复制该节点（该方法只会复制特性，而不会复制事件处理程序）

var deepList = myList.cloneNode(true);

normalize():在调用此方法节点的后代节点中查找，若找到空文本节点，则删除，若找到相邻的文本节点，则合并

Document类型

document对象是window对象的一个属性，可以将其作为全局对象来访问，其节点类型nodeType为9

属性

documentElement: 指向文档的<html>元素
body：直接指向<body>元素
title：<title>元素的值
URL：包含页面完整的URL
domain：取得页面域名
referrer：取得来源页面的URL

方法

getElementById()：查找元素，接受元素的ID
getElementsByTagName(): 查找元素，接受元素的标签名，返回元素集合
getElementsByName(): 查找元素，接受元素的name属性值，返回元素集合（只限定于HTMLDocument类型）
write()：接受一个字符串参数，将文本原样写入(如果在文档加载完成后，再调用该方法，则会重写整个页面)

document.write("<strong>" + (new Date()).toString() + "</strong>");

writeln()：与write()类似，但是会在末尾自动添加一个换行符（\n）
open()/close():打开和关闭网页的输出流，不常用

特殊集合

document.anchors: 所有带 name 特性的<a>元素
document.forms：所有<form>元素
document.images：所有<image>元素
document.links：所有带 href 特性的<a>元素

Element类型

节点类型nodeType为1，nodeName为元素的标签名，nodeValue为null

属性

attributes：包含着一个NameNodeMap，元素的每个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap。其中每个节点的nodeName就是特性名，而nodeValue就是值

var id = element.attributes["id"].nodeValue;

方法

getAttribute()：访问元素属性，若不存在，则返回null。

div.getAttribute("class");
div.getAttribute("title");
  • 与直接用元素.属性名访问的区别：当访问style属性时，该方法返回CSS文本，而通过属性名访问时，返回一个对象。当访问onclick等事件处理程序时，该方法返回响应的代码，而通过属性名访问时，返回JS函数。

setAttribute()：设置元素属性，接受两个参数，属性名和值

div.setAttribute("id","newid");

removeAttribute()：删除元素特性，接受一个参数，属性名

div.removeAttribute("class");

document.createElement()：创建元素，返回该元素

var div = document.createElement("div");

Text类型

节点类型nodeType为3，nodeName为”#text”，nodeValue为文本值，没有子节点

属性

nodeValue或data：文本节点中包含的文本值
length：文本字符的长度

方法

document.createTextNode()：创建新的文本节点，接受一个文本字符串值

var textNode = document.createTextNode("Hello world");

normalize():在调用此方法节点的后代节点中查找，若找到空文本节点，则删除，若找到相邻的文本节点，则合并

element.normalize();

splitText(): 将一个文本节点分成两个文本节点，接受一个参数，分隔的位置，返回包含后半截文本的新文本节点

var textNode = deocument.createTextNode("Hello world");
element.appendChild(textNode);

var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue);  //"Hello"
alert(newNode.nodeValue);  //" world"
alert(element.ChildNodes.length);  //2

Attr类型

nodeType值为2，nodeName是属性的名称，nodeValue是属性值，在HTML中没有子节点

属性

name：属性名称
value：属性值
specified：布尔值，区别属性时由代码指定的，还是默认的

操作表格

<table>元素的属性和方法

  • caption：对<caption>元素的指针
  • rows：对表格中所有行的HTMLCollection
  • tBodies：对表格中所有<tbody>的HTMLCollection

<tbody>元素的属性和方法

  • rows：对<tbody>中行的HTMLCollection
  • insertRow(pos): 在指定位置插入行
tbody.insertRow(0);  //在tbody中的最前面插入一行
  • deleteRow(pos): 在指定位置删除行

<tr>元素的属性和方法

  • cells：对<tr>中列的HTMLCollection
  • insertCell(pos): 在指定位置插入单元格
  • deleteCell(pos): 在指定位置删除单元格

因此可以使用以上属性和方法更为方便地操作表格

tbody.rows[0].cells[0];   //第一行第一个单元格
NodeList（例如ChildNodes）、NameNodeMap（包含元素的属性节点）、HTMLCollection都是动态集合，他们会随着文档结构的变化而随之更新
PAT-python-zjw
关注
专栏目录
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
【JavaScript 教程】DOM——Text 节点和 DocumentFragment 节点
web前端开发
06-09 269
1、Text 节点的概念文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点...
JavaScript学习笔记之DOM基础 2.4
01-19
早期，在未使用JavaScript之前，网页中的内容可以正常显示出来，用户可以通过外设（如鼠标）操控浏览到相关内容，这种浏览体验对用户而言可能并不理想。 根据这个需求，内容的提供方就有了合理化目标——那就是在不...
JavaScript学习笔记之DOM基础操作实例小结
12-08
在本文中，我们将深入探讨JavaScript DOM基础操作，主要包括子节点、节点类型、元素节点以及父节点的处理。 一、子节点操作 1. 获取子节点数量 在实例01中，我们通过`childNodes.length`获取了`<ul id="ul1">`元素...
JavaScript 学习笔记（十二） dom
10-29
### JavaScript DOM 操作详解 #### 一、DOM 概述 DOM（Document Object Model），即文档对象模型，是用于表示和操作HTML或XML文档的一种树形结构。在Web开发中，DOM提供了对文档进行访问和操作的一系列接口，使得...
HTML5 Canvas动态绘制心型线和玫瑰线
热门推荐
zjw_python的博客
10-26 1万+
HTML5的Canvas元素提供了丰富的绘图功能，能够使我们制作出许多精美的动画。本次将运用canvas绘制心型线和玫瑰线。1.心型线和玫瑰线绘制这两种曲线，首先我们分别选用两个参数方程（心型线和玫瑰线的参数方程不同，其形态特征也不一样，你可以根据你的需要选择合适的参数方程） 桃心型线的参数方程： x = 16 （sinθ）^3 y = 13 cosθ- 5 cos 2θ - 2 cos 3θ
史上最简单的无缝衔接轮播图
zjw_python的博客
08-25 6157
网上有大量关于使用原生js编写轮播图的例子，不得不说，他们的文章很棒，但是我发现一个缺点，就是他们的轮播图组件太过于完整，添加了很多按钮功能，代码量较大。掩盖了轮播图的最基本也是最重要的实现原理，很容易让新手摸不着头脑。 这篇文章的目的就是想用最少的代码，来讲解轮播图的实现原理，实现最基本的功能。等你学会了轮播图的实现后，至于之后怎么丰富轮播图，就是小菜一碟了 效果 思路 将图...
上传图片快速预览HTML5 FileReader + Window.URL+滤镜（兼容低版本IE）
zjw_python的博客
01-07 3268
在网页中经常需要上传图片并进行预览，大多数情况下是通过ajax将图片上传到后端，然后反馈上传状态和结果给前端进行预览。这里我们介绍三种快速的上传图片预览方法，不需要后端参与也可快速进行图片预览。 FileReader文档 Window.URL文档 1.获取File对象 两种预览方法均需要先获取控件的file对象 var fileinput = Document.getElemen
高性能Javascript读书总结
zjw_python的博客
04-07 2640
1. 加载和执行 尽量将所有的<script>标签放在</body>标签之前，确保脚本执行前页面已经完成了渲染，避免脚本的下载阻塞其他资源（例如图片）的下载。 合并脚本，减少页面中的<script>标签 使用<script>标签的defer和async属性（两者的区别见这里） 通过Javascript动态创建<script>标签插入文档...
TypeScript 学习笔记
zjw_python的博客
11-16 1955
该篇笔记仅记录与Javascript相比新增的概念和功能 1.基础类型 // 布尔值 let a: boolean = false; // 数字 let b: number = 123; // 字符串 let c: string = "zjw"; // 数组 let d: number[] = [1,2,3]; let d: Array<number> = [1,2,3]; // 元组，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同 let e: [string,
用JS手写一个简单的Promise
zjw_python的博客
08-18 1500
参照Promise/A+规范手写了一个简化版的promise class MyPromise { constructor(fn) { if (typeof fn !== 'function') { throw new Error('参数必须为函数'); } this._state = 'Pending'; this._value = null; this._reason = null; this.fulfillCallbacks = [];
web性能权威指南读书笔记
zjw_python的博客
05-20 1127
1 网络技术概览 1.1 延迟和带宽 对所有网络通信都具有决定性影响的两个方面是延迟和带宽 总延迟包括传播延迟（与传输介质和传输距离有关）、传输延迟（消息中所有比特转移到链路中需要的时间，与消息的长度和链路速率有关）、处理延迟（处理分组所需要的时间）和排队延迟（分组排队等待处理的时间） 1.2 TCP TCP三次握手过程： SYN 客户端选择一个随机序列号x，并发送一个SYN分组，其中还...
Quicksand 插件入门介绍
zjw_python的博客
10-02 1121
1.插件介绍JS的插件丰富多样，今天试用了一款叫做Quicksand的插件，发现其使用方法虽然简单，但展现出来的洗牌特效却让人眼前一亮。下面就简要介绍一下这个插件的使用方法。 此插件的官网地址：Quicksand（此插件依赖于JQuery，因此在使用该插件时，务必在其之前引入JQuery插件）2.使用方法该插件的调用方法非常简洁，仅一句代码：$('#source').quicksand( $('#
Javascript学习笔记21 HTML5 API （requestAnimationFrame FileReader WebWoker）
zjw_python的博客
05-14 792
requestAnimationFrame() 为解决setInterval()和setTimeout()执行动画事件不精确的问题，HTML5 创造了该方法来告诉浏览器您希望执行动画操作并请求浏览器在下一次重绘之前调用指定的函数来更新动画。回调的次数通常是每秒60次，当运行在后台标签页或者隐藏的&amp;amp;amp;amp;amp;lt;iframe&amp;amp;amp;amp;amp;gt; 里时，requestAnimationFrame() 会暂停调用以提升性...
Javascript学习笔记17 高级技巧（函数绑定，柯里化，定时器）
zjw_python的博客
04-30 540
高级函数 类型检测 在任何值上调用Object的toString()方法都会返回一个表示该对象原生构造函数名的字符串，因此可以使用该方法检测对象类型，弥补type of以及 instanceof的一些问题。 Object.prototype.toString.call(value) == "[object Array]"; //检测值的类型是否为数组 Object.prototy...
Javascript学习笔记6 DOM扩展
zjw_python的博客
03-24 460
选择符API querySelector() 接受一个CSS选择符，返回与该模式匹配的第一个元素，没有找到返回null var mydiv = document.querySelector(&quot;#mydiv&quot;); querySelectorAll() 与querySelector()类似，不过其返回所有匹配的元素，即一个NodeList var selecteds = docum...
Javascript学习笔记1 理解对象 属性 原型对象
zjw_python的博客
03-13 437
属性类型 对象属性包括两种类型：数据属性和访问器属性 数据属性 包含一个数据值的位置，在这个位置可以读取和写入值。其包括4个特性：configurable（能否删除或修改），enumerable（能否通过for-in语句返回属性），writeable（能否修改属性的值），value（属性值，默认为undefined） var person = { name: &quot;zjw&quot; }; ...
Javascript学习笔记12 错误处理和调试
zjw_python的博客
04-10 422
IE、Firefox、Safari、Chrome和Opera等主流浏览器，都具有某种向用户报告JavaScript错误的机制。默认情况下，所有浏览器都会隐藏此类信息，需要开发人员启用报告功能 try-catch语句 基本用法 try{ // 可能会发生错误的代码 } catch（error）{ // 在错误发生时怎么处理 } 当try块中的任何代码发生了错误，就会...
Javascript学习笔记10 Canvas绘图
zjw_python的博客
04-08 418
基本用法 要使用&lt;canvas&gt;元素，必须先设置width和height属性，指定画布大小。注意width和height是不带单位的 &lt;canvas id="drawing" width="200" height="200"&gt;drawing&lt;/canvas&gt; 要在这块画布上绘图，需要使用getContext()方法取得绘图上下文,传入2d，就得到2d绘..
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值