[JavaScript] DOM

1. Node类型

1.1 什么是DOM

DOM是针对HTML和XML文档的一个API，它描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记，每个节点都拥有自己的特点、数据和方法，另外也与其他节点存在某种关系，节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树型结构。

1.2 Node

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。Node接口在JavaScript中是作为Node类型实现的，除IE外，其他所有浏览器都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型，节点类型由在Node类型中定义的下列12个数值常量来表示：

1) Node.ELEMENT_NODE(1)

2) Node.ATTRIBUTE_NODE(2)

3) Node.TEXT_NODE(3)

4) Node.CDATA_SECTION_NODE(4)

5) Node.ENTITY_REFERENCE_NODE(5)

6) Node.ENTITY_NODE(6)

7) Node.PROCESSING_INSTRUCTION_NODE(7)

8) Node.COMMENT_NODE(8)

9) Node.DOCUMENT_NODE(9)

10) Node.DOCUMENT_TYPE_NODE(10)

11) Node.DOCUMENT_FRAGMENT_NODE(11)

12) Node.NOTATION_NODE(12)

通过比较上面这些常量，可以确定节点的类型，例如：

if (mynode.nodeType == Node.ELEMENT_NODE) {alert("Node is an element.");
}

但是IE没有公开Node类型的构造函数，因此为了兼容，最好使用数字比较，例如：

if (mynode.nodeType == 1) {alert("Node is an element.");
}

要了解节点的具体信息，可以使用nodeName和nodeValue两个属性，它们的值取决于节点的类型。对于元素节点，nodeName中保存的是元素的标签名，而nodeValue为null。

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。虽然可以通过方括号来访问NodeList的值，而这个对象也有length属性，但它并不是Array的实例，例如：

var firstChild = mynode.childNodes[0];
var secondChild = mynode.childNodes.item(1);
var count = someNode.childNodes.length;

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的每个节点都有同一个父节点，且相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。列表中第一个节点的previousSibling和最后一个节点的nextSibling属性的值都是null。

hasChildNodes()方法在节点包含一或多个子节点时返回true，可以用以检测节点是否包含子节点。所有节点都有一个属性ownerDocument，该属性指向表示整个文档的文档节点，通过这个属性，我们可以不必在节点层次中回溯到达顶端，而是可以直接访问文档节点。

1.3 操作节点

DOM提供了一些操作节点的方法，最常用的是appendChild()，用于向childNodes列表的末尾添加一个节点，更新完成后，appendChild()返回新增的节点，例如：

var returnNode = mynode.appendChild(newNode);

如果传入到appendChild()中的节点已经是文档的一部分，那结果就会将该节点从原位置移到新位置。

如果需要把节点放在 childNodes列表中的某个特定的位置上，而不是末尾，可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入完成后，insertBefore()返回插入的节点，例如：

var returnNode = mynode.insertBefore(newNode, someNode);

如果参照节点是null，则insertBefore与appendChild()相同。

replaceChild()方法接受两个参数：要插入的节点和要替换的节点。被替换的节点将由这个方法返回并从文档树中被移除，同时要插入的节点占据其位置，例如：

var returnNode = mynode.replaceChild(newNode, someNode);

如果只要移除节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除的节点，同时返回被移除的节点，例如：

var returnNode = mynode.removeChild(someNode);

以上四种方法操作的都是某个节点的子节点，要使用这几个方法必须先取得父节点，如果在不支持子节点的节点上调用这些方法，会导致错误。

有两个方法是所有类型的节点都有的。第一个是cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制，深复制即复制节点及其整个子节点树。复制后返回的节点副本属于文档，但没有父节点，尾须通过方法将它添加到文档中。

还有一个方法是normalize()，这个方法处理文档树中的文本节点。由于某些原因，文本节点可能不包含文本，或者接连出现两个文本节点。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找这种情况，如果找到空文本节点，则删除它，如果找到相邻的文本节点，则合并它们。

2. Document类型

2.1 Document

JavaScript通过Document类型表示文档。在浏览器上，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。页且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。Document节点具有以下特征：

1) nodeType的值为9。

2) nodeName的值为"#document"。

3) nodeValue的值为null。

4) parentNode的值为null。

DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment，还有一些内置的访问其子节点的快捷方式。

第一个是documentElement属性，它始终指向HTML页面中的<html>元素。还有一个body属性，指向<body>元素。所有浏览器都支持document.documentELement和document.body属性。

通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体，可以通过doctype属性(document.doctype)来访问它的信息。不同浏览器对doctype的支持差异很大。

作为HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性，这些属性提供了document对象所表现的网页的一些信息。其中第一个属性是title，包含着<title>元素中的文本。还有三个与对网页请求有关的属性：URL、domain和referrer。URL属性中包含页面完整的URL，domain属性只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL，在没有来源页面的情况下，referrer属性中可能包含空字符串。

这三个属性中只有domain属性是可设置的，但由安全方面的限制，并非可以给domain设置任何值，如果URL中包含一个子域名，如www.test.com，那么就只能将domain设置为test.com。不能将这个属性设置为URL中不包含的域。浏览器对domain属性还有一个限制，即如果域名一开始是“松散的”，那么不能将它再设置为“紧凑的”。例如将document.domain设置为test.com后，就不能再将其设置回www.test.com，否则会导致错误。

2.2 查找元素

取得元素的操作可以使用document的几个方法来完成，包括getElementById()和getElementsByTagName()等。

getElement()接受一个参数：要取得的元素的ID，如果找到相应元素则返回，否则返回null，例如：

var div = document.getElementById("mydiv");

注意ID必须与页面中的元素id属性严格匹配，包括大小写。但IE8及较低版本不区分大小写，如果页面中多个元素的ID值相同，getElementById()只返回文档中第一次出现的元素。IE7中如果表单元素的name属性与给定的ID匹配，也会被该方法返回。

另一个常用于取得元素引用的方法是getElementsByTagName()。这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的集合，例如：

var images = document.getElementsByTagName("img");

这个方法会返回一个HTMLCollection对象，该对象与NodeList类似，可以使用方括号语法或item()方法来访问其中的项，而元素的数量可以通过其length属性取得。HTMLCollection对象还有一个方法：namedItem()，使用这个方法可以通过元素的name属性取得集合中的项，例如：

var myimage = images.namedItem("myImage");

在提供按索引访问项的基础上，HTMLCollection还支持按名称访问项，对命名的项也可以使用方括号来访问。要取得所有的元素，可以向getElementsByTagName()中传入“*”。

第三个方法，也是只有HTMLDocument才有的方法，是getElementsByName()。这个方法会返回带有给定name属性的所有元素，例如：

var radios = document.getElementsByName("color");

getElementsByName()也会返回一个HTMLCollection对象。

2.3 特殊集合

除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象，为访问文档常用的部分提供了快捷方式，包括以下：

1) document.anchors: 包含文档中所有带name属性的<a>元素。

2) document.applets: 包含文档中所有的<applet>元素。

3) document.forms: 包含文档中所有的<form>元素。

4) document.images: 包含文档中所有的<img>元素。

5) document.links: 包含文档中所有带href属性的<a>元素。

2.4 一致性检测

由于DOM分为多个级别，因此检测浏览器实现了DOM的哪些部分就十分必要。document.implementation属性就为此提供相应信息和功能。DOM1级只为document.implementation规定了一个方法，即hasFeature()。这个方法接受两个参数：要检测的DOM功能的名称及版本号，如果浏览器支持对应的名称和版本，则返回true，例如：

var hasXMLDom = document.implementation.hasFeature("XML", "1.0");

可以检测的不同的值及版本号
功能	版本号	说明
Core	1.0、2.0、3.0	基本的DOM，用于描述表现文档的节点树。
XML	1.0、2.0、3.0	Core的XML扩展。
HTML	1.0、2.0	XML的HTML扩展。
Views	2.0	基于某些样式完成文档的格式化。
StyleSheets	2.0	将样式表关联到文档。
CSS	2.0	对层叠样式表1级的支持。
CSS2	2.0	对层叠样式表2级的支持。
Events	2.0	常规的DOM事件。
UIEvents	2.0	用户界面事件。
MouseEvents	2.0	由鼠标引发的事件。
MutationEvents	2.0	DOM树变化时引发的事件。
HTMLEvents	2.0	HTML4.01事件。
Range	2.0	用于操作DOM树中某个节围的对象和方法。
Traversal	2.0	遍历DOM树的方法。
LS	3.0	文件与DOM树之间的同步加载和保存。
LS-Async	3.0	文件与DOM树之间的异步加载和保存。
Validation	3.0	在确保有效的前提下修改DOM树的方法。

2.5 文档写入

document对象拥有将输出流写入到网页中的能力。这个能力体现在4个方法中：write()、writeln()、open()和close()。其中write()和writeln()方法都接受一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而writeln()会在字符串末尾添加一个换行符，例如：

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

此外，还可以使用write()和writeln()方法动态地包含外部资源，但是不能直接包含字符串"</script>"，因为这会导致该字符串被解释为脚本块的结束，所以解决方案：

document.write("<script type=\"text/javascript\" src=\"file.js\"") + "</scr" + "ipt>";

如果在文档结束后再调用document.write()，那么在输出的内容将会重写整个页面。

3. Element类型

3.1 Element

除了Document类型之外，Element类型是Web编辑中最常用的类型。Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及属性的访问。Element节点具有以下特征：

1) nodeType的值为1。

2) nodeName的值为元素的标签名。

3) nodeValue的值为null。

4) parentNode可能是Document或Element。

要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性，这两个属性会返回相同的值，例如：

var div = document.getElementById("mydiv");
alert(div.tagName);
alert(div.nodeName);

在HTML中，标签名始终以大写表示，而XML中，标签名与源代码中的保持一致，假如不确定自己的脚本会在HTML还是XML中执行，可以在比较之前转换为相同的大小写。

3.2 HTML元素

所有HTML元素都由HTMLElement类型表示。HTMLElement类型直接继承自Element并添加了一些属性：

1) id: 元素在文档中的唯一标识符。

2) title: 有关元素的附加说明信息。

3) lang: 元素内容的语言代码。

4) dir: 语言的方向，值为"ltr"或"rtl"。

5) className: 与元素的class属性对应。

上述这些属性都可以用来取得或修改相应的属性值，例如：

var div = document.getElementById("mydiv"); 
alert(div.id); 
alert(div.className);

3.3 取得和设置属性

每个元素都有一或多个属性，操作属性的DOM方法主要有三个：getAttribute()、setAttribute()和removeAttribute()，例如：

var div = document.getElementById("mydiv");  
alert(div.getAttribute("id"));  
alert(div.getAttribute("class"));

注意传递给getAttribute()的属性名与实际的属性名相同，比如class属性值，只有在通过对象属性访问时才使用className。如果给定名称的属性不存在，则返回null。

通过getAttribute()方法也可以取得自定义属性，属性的名称是不区分大小写的。有两类特殊的属性，虽然有属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类是style，在通过getAttribute()访问时，返回的style属性值是CSS文本，而通过属性访问则会返回一个对象。第二类是类似

与getAttribute()对应的方法是setAttribute()，这个方法接受两个参数：要设置的属性名和值，如果属性已经存在，则会以指定的值替换现有的值，如果属性不存在，则创建该属性并设置相应的值，例如：

var div = document.getElementById("mydiv");   
div.setAttribute("id", "myid");
div.setAttribute("class", "myclass");

通过setAttribute()方法即可以操作HTML属性也可以操作自定义属性。通过这个方法设置的属性名会被统一转换为小写形式。

可以直接给属性赋值，但不包括自定义属性，例如：

var div = document.getElementById("mydiv");    
div.id = "myid";
div.class = "myclass";

removeAttribute()方法用于彻底删除元素的属性，调用这个方法不仅会清除属性的值，也会从元素中完全删除属性，例如：

var div = document.getElementById("mydiv");     
div.removeAttribute("class");

3.4 attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个动态集合。元素中的每一个属性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，NamedNodeMap有以下方法：

1) getNamedItem(name): 返回nodeName属性等于name的节点。

2) removeNamedItem(name): 从列表中移除nodeName属性等于name的节点。

3) setNamedItem(node): 向列表中添加节点，以节点的nodeName属性为索引。

4) item(pos): 返回位于pos位置处的节点。

attributes属性中包含一系列节点，每个节点的nodeName就是属性的名称，而节点的nodeValue就是属性的值，例如：

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;

调用removeNamedItem()直接删除给定名称的属性，例如：

var oldAttr = element.attributes.removeNamedItem("id");

setNamedItem()方法可以为元素添加一个属性，需要传入一个属性节点，例如：

element.attributes.setNamedItem(newAttr);

3.5 创建元素

使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML中不区分大小写，而在XML中，则是区分大小写的，例如：

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

在IE中可以用另一个方式使用createElement()，为这个方法传入完整的元素标签，也可以包含属性，例如：

var div = document.createElement("<div id=\"mydiv\"></div>");

3.6 元素的子节点

元素可以有任意数目的子节点和后代节点，元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同浏览器在对待这些节点方面存在不同。

<ul id="mylist"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

在IE中解析，<ul>元素会有3个子节点，分别是3个<li>元素。但在其他浏览器中，<ul>元素都会有7个元素，包括3个<li>元素和4个文本节点（<li>元素之间的空白）。

元素也支持getElementsByTagName()方法，在通过元素调用这个方法时，除了搜索起点是当前元素，其他与通过document调用这个方法相同。

4. Text类型

4.1 Text

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征：

1) nodeType的值为3。

2) nodeName的值为"#Text"。

3) nodeValue的值为节点所包含的文本。

4) parentNode是一个Element。

5) 无子节点。

可以通过nodeValue属性或data属性访问Text节点中包含的文本，这两个属性包含的值相同。使用以下方法可以操作节点中的文本：

1) appendData(text): 将text添加到节点的末尾。

2) deleteData(offset, count): 从offset指定的位置开始删除count个字符。

3) insertData(offset, text): 在offset指定的位置插入text。

4) replaceData(offset, count, text): 用text替换从offset到offset+count处的文本。

5) splitText(offset): 从offset指定的位置将当前文本节点分成两个文本节点。

6) substringData(offset, count): 提取从offset到offset+count处的字符串。

除此之外，Text节点还有一个length属性，保存着节点中字符的数目，等同于nodeValue.length和data.length。

在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须有内容。

4.2 创建文本节点

可以使用document.createTextNode()创建新文本节点，这个方法接受一个参数：要插入节点中的文本，例如：

var textNode = document.createTextNode("Hello World!");

一般每个元素只有一个文本节点，但在有些情况下可能包含多个文本节点，容易导致混乱，可以调用normalize()方法将相邻的文本节点合并，这个方法是由Node类型定义的。Text类型的splitText()方法与normalize()相反，这个方法将一个文本节点分成两个文本节点。

5. 其他类型

5.1 Comment类型

注释在DOM中是通过Comment类型表示的，Comment节点具有以下特征：

1) nodeType的值为8。

2) nodeName的值为"#comment"。

3) nodeValue的值是注释的内容。

4) parentNode可能是Document或Element。

5) 没有子节点。

Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()外所有字符串操作方法。与Text类型相似，可以通过nodeValue或data属性来取得注释的内容。

5.2 CDATASection类型

CDATASection类型只针对基于XML的文档，表示的是CDATA区域。与Comment类似，CDATASection类型继承自Text类型，因此拥有除splitText()外所有字符串操作方法。DATASection节点具有以下特征：

1) nodeType的值为4。

2) nodeName的值为"#cdata-section"。

3) nodeValue的值为CDATA区域中的内容。

4) parentNode可能是Document或Element。

5) 没有子节点。

CDATA区域只会出现在XML文档中，多数浏览器会把CDATA区域错误解析为Comment或Element。在XML中，可以使用document.createCDataSection()来创建CDATA区域，只需为其传入节点的内容。

5.3 DocumentType类型

DocumentType类型在Web浏览器中不常用，仅有Firefox、Safari和Opera支持。DocumentType包含着与文档的doctype有关的所有信息，它具有以下特征：

1) nodeType的值为10。

2) nodeName的值为doctype的名称。

3) nodeValue的值为null。

4) parentNode是Document。

5) 没有子节点。

5.4 DocumentFragment类型

在所有节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种“轻量级”文档，可以包含和控制节点，但不会占用额外资源。DocumentFragment节点具有以下特征：

1) nodeType的值为11。

2) nodeName的值为"#document-fragment"。

3) nodeValue的值为null。

4) praentNode的值为null。

5) 子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntiryReference。

5.5 Attr类型

元素的属性在DOM中以Attr类型来表示。属性节点具有以下特征：

1) nodeType的值为11。

2) nodeName的值是属性的名称。

3) nodeValue的值是属性的值。

4) parentNode的值为null。

5) 在HTML中没有子节点。

6) 在XML中子节点可以是Text或EntityReference。

Attr对象有3个属性：name、value和specified。其中，name是属性名称，value是属性的值，specified是一个布尔值，用以区别属性是在代码中指定的，还是默认的。

转载于:https://blog.51cto.com/hanviseas/991048

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

24岁零基础还能转行学习前端吗？前景怎么样呢？【全新web前端开发视频教程】
不少的伙伴来问我，计算机专业已经不吃香了，毕业出来时找不到工作，但是看看现在互联网人才缺口依然很大，别人在一个行业成功了，大家就会说这个行业都这么多人成功了肯定已经不缺人了，然后你就不去争取了。对那些问“现在学编程，晚了么？”的小伙伴，我想说学编程，任何时…...
2024/4/24 13:35:59
JS异步编程怎么回事
JS异步编程怎么回事？如何能学好Web前端开发？JavaScript是Web前端开发三要素之一。JavaScript涵盖的内容比较多，需要一个较为系统的学习过程才能逐渐掌握，下面就给大家讲解一下JavaScript异步编程的知识。什么是异步? 所谓"异步"，简单说就是一个任务分成两段，先…...
2024/4/27 9:22:05
用webpack4从零开始构建react开发环境
项目文件准备：执行npm init,然后创建如下图所示的文件。在index.html里面添加 <!DOCTYPE html> <html><head><title>The Minimal React Webpack Babel Setup</title></head><body><div id="app"></div><…...
2024/4/24 13:35:57
Electron+Vue+Webpack项目框架架构教程与源码
摘要：随着前端技术的飞速发展，越来越多的技术领域开始被前端工程师踏足。从NodeJs问世至今，各种前端工具脚手架、服务端框架层出不穷，“全栈工程师”对于前端开发者来说，再也不只是说说而已。在NodeJs及其衍生技术高速发展的同时，Nw和Electron的问世，更是为前端发展提速…...
2024/4/15 3:51:41
什么职业转行web前端开发工程师，就业率最高？
近几年，随着技术和政策的变化，国内对技术人才的需求也是翻天覆地的变化。对于很多毕业学生来说，前端开发工程师行业需求大、待遇好、不限门槛、政策优,成为了很多大学生的就业发展选择。行业需求大 5G时代即将来临，各行各业对产品的用户体验需求空前大增。人们在享受互联…...
2024/4/15 3:51:40
手摸手的教你配置一个基于webpack4的react开发环境
前言 webpack作为现代前端技术的基石，相信绝大部分的前端开发者都听说或是在项目中使用过。但是由于现在各种各样cli工具的出现，能够掌握webpack基本配置和使用的人，可能就不那么多了。最开始接触webpack还是在以前的angular.js项目中，之后从angular.js转到react后一直使用…...
2024/5/2 8:02:35
全栈Web开发-完整路线图
学习网络开发对于创始人而言是一个巨大的优势，即使了解基础知识也将非常有用。这篇文章将为您提供一个概述，概述您需要学习的所有内容，入门指南以及可以用来快速学习的最佳资源的集合。我将告诉您专业的全栈Web开发人员需要了解的所有内容，但是如果您仅想了解基础知识，…...
2024/4/15 3:51:38
Nodejs系列课程，从入门到进阶帮你打通全栈
本课程由社区博主：Scott 编写本文通过提供给大家学习的方法，以及我个人录制的一系列视频，帮助你更快更好的学习 Nodejs，了解前后端的 HTTP 知识，以及配置和使用阿里云 ECS 来部署你的 Nodejs 项目，成为那个具有争议的全栈开发工程师。要不要学习 Nodejs 如果你是前端开…...
2024/4/20 17:02:30
Solidity教程：初学Solidity
这篇关于Solidity教程的博客展示了很多Solidity特性。本教程假定你对以太坊虚拟机和编程有一定的了解。以太坊，“世界计算机”提供了一个非常强大的全球共享基础设施，使用名为Solidity的编程语言构建去中心化应用程序。让我们开始我们的Solidity教程，介绍Solidity。什么是…...
2024/5/2 8:46:22
web前端开发这门技术的由来，入门必读
按1990年，第一个Web浏览器诞生，而WWW的诞生直接拉开前端史的序幕。从静态页面到JavaScript，从依赖后端到自主开发，前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高，从前端技术由国外开发者主导到如今国内自主产生的小程序技术，我们走了近 30…...
2024/4/18 12:36:55
HTML+CSS+JS+Bootstrap+XML
前端一、Web概念 1、JavaWeb：概念：使用Java语言开发基于互联网的项目 2、软件构架 1.C/S：Client/Server 客户端/服务器端优点：用户体验好缺点：开发、安装，部署，维护麻烦 2. B/S: Browser/Server 浏览器/服务器端优点：开发、安装，部…...
2024/4/15 3:51:34
学习记录-微信小程序
文章目录一、设计要素1.五大要点2.小程序集群搭建的六种方法二、概述1.诞生背景2.什么是小程序3.小程序能做什么4.小程序开发工作准备5.开发者工具下载6.开发者工具1)详情2)调试器7.官方开发文档8.小程序代码构成小程序配置文件介绍(.json)三、小程序框架与运行机制1.MINA框架1…...
2024/4/24 13:35:56
国外前端开发大神经验：目标越明确，计划就越专业【全新web前端开发视频教程】
你想成为一名Web开发人员，但现在你面前有这样一个问题，那就是你没有在高科技行业工作的经验。你上了一些课程，也花了时间在个人编码项目上，但是你的简历上关于“经验”的部分仍然不为企业承认。过渡到一个新的领域从来就不是一件简单的事。你不知道你是否准备好了，不知道是…...
2024/4/24 13:35:55
Webpack 快速上手（下）
作者 | 朱士奇杏仁前端开发工程师，代码洁癖症早期，关注前端技术。由于文章篇幅较长，为了更好的阅读体验，本文分为上、中、下三篇：上篇介绍了什么是 webpack，为什么需要 webpack，webpack 的文件输入和输出中篇介绍了 webpack 在输入和输出这段中间所做的事情，也就是…...
2024/4/24 13:35:54
DOM(文档对象模型)
1、节点层次 Node类型 DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现，JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法每个节点都有一个 nodeType 属性，用于表明节点的类型。节点类型由在 Node 类型中定…...
2024/4/24 13:35:53
JS基础 | JavaScript 极简史
0. 前言Cocos Creator 游戏引擎可使用 JavaScript、TypeScript 编程语言为游戏提供组件脚本代码，开发出的游戏可运行在电脑浏览器、移动浏览器、桌面应用、移动APP、微信等众多平台之上。Shawn 计划从零开始，以 JavaScript 编程语言为起点，面向青少年学生或对游戏开发感兴趣…...
2024/4/24 13:35:52
从零开始的Webpack4教程
1、了解Webpack相关什么是webpack Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理它将根据模块的依赖关系进行静态分析，生成对应的静态资源五个核心概念 Entry：入口起点(entry point)指示 webpack 应该…...
2024/4/24 13:35:58
webpack-react 之 webpack 篇（上）
构建一个小项目——FlyBird，学习webpack和react。（本文成文于2017/2/25）从webpack开始本篇从零开始，详细记录webpack的各个方面。文章中将会放入很多链接以便扩展，我也会归纳总结，不读扩展不会影响到对本文的理解，但是有时间还是看看吧。声明：在阅读本文列出的链…...
2024/4/24 13:35:50
JS小白教程
P01 JavaScript概述JavaScript是什么？JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。直译式：直接解释执行，代码不进行预编译。脚本：凡是不能独立执行需要依赖其他程序的，通常都叫做脚本。JS引入方式标签内引入：直接写在标签内（不推荐） &…...
2024/4/24 13:35:49
手把手从0打造电商平台前端
第一章课程介绍与开发前的准备工作1.1课程目标掌握一个电商网站从设计到上线的整个过程所涉及的流程具备独立开发一个前端项目的能力让你一开始就比别人起点更高,获得更快速的成长掌握开发过程中各种坑的解决思路和方法架构设计前后端完全分离分层架构模块化技术选型HTML css …...
2024/4/24 13:35:48

[JavaScript] DOM

相关文章

最新文章