第40节 DOM文档对象模型-Javascript-王唯

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

DOM(Document Object Model，文档对象模型)：

DOM是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口；其定义了访问和处理文档的标准方法；是针对HTML和XML文档的一个API；

DOM描绘了一个层次化的节点树，允许开发者添加、移除和修改页面的某一部分，从而重构整个文档。

DOM脱胎于Netscape及微软创始的DHTML，但现在已经成为表现和操作页面标记的真正的跨平台、语言中立的方式；

DOM与具体的编程语言无关，可以在C、 Java script、ActionScript、Java等语言中实现；

DOM标准的目标是让“任何一种程序设计语言”能操控使用“任何一种标记语言”编写出的“任何一份文档”；

DOM 级别：

DOM Level 1：由两个模块组成：DOM核心（DOM Core）和DOM HTML；专注于 HTML 和 XML 文档模型，它含有文档导航和处理功能；

DOM Level 2：对 DOM1级做了扩展，添加了样式表对象模型，并定义了操作附于文档之上的样式信息的功能性；同时还定义了一个事件模型，并提供了对 XML 命名空间的支持；

DOM Level 3：对DOM2级做了扩展，规定了内容模型 (DTD 和 Schemas) 和文档验证，同时规定了文档加载和保存、文档查看、文档格式化和关键事件；

DOM Level 0：确切来说，不存在DOM0级，因为它不是 W3C 规范，而仅仅是对在 Netscape Navigator 3.0 和 Microsoft Internet Explorer 3.0 中的等价功能性的一种定义，实际上指的就是DHTML；

1998年10月 DOM1级规范成为W3C的标准，为基本的文档结构及查询提供了接口；

目前主流的浏览器都已实现了DOM1、基本实现了DOM2和3；

DOM组成：

Core DOM：定义了一套标准的针对任何结构化文档的对象，即用于XML和HTML的共用接口；
HTML DOM：在 DOM 核心的基础上加以扩展，定义了一套标准的针对HTML文档的接口对象；

XML：

XML 指可扩展标记语言（EXtensible Markup Language），它是一种标记语言，类似于HTML，它的设计宗旨是传输数据，而非显示数据；

XML 标签没有被预定义，需要开发者自定义标签；

XML 被设计为具有自我描述性，是W3C的推荐标准；

XML 的用途：把数据从 HTML 分离、简化数据共享、简化数据传输、简化平台的变更；

DOM树：

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构；

如HTML：

 <html>
<head>
    <title>零点网络</title>
</head>
<body>
    <h1>零点程序员</h1>
    <p>zeronetwork <a href="#">王唯</a></p>
</body>
</html>

树状图：

树状图

每一个标签是是文档的一个节点，它表示一个Node对象；

节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记；

每种节点都拥有各自的特点、数据和方法，并且也与其他节点存在某种关系；

节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构；

文档节点（ Document ）：是每个文档的根节点；文档节点只有一个子节点，即<html>元素，也称为文档元素，它是文档最外层元素，其他所有元素都包含在文档元素中；每个文档只能有一个文档元素；在XML中，没有预定义的文档元素，因此任何元素都可能成为文档元素；

Node接口：

每一段标记都可以通过树中的一个节点来表示，这个节点称为Node；

DOM1级定义一个Node接口，其用于抽象地表示文档中一个独立的部分；

HTML元素通过元素节点表示，特性(attribute)通过特性节点表示，文档类型通过文档类型节点表示，注释通过注释节点表示，共12种节点类型，这些类型都继承自一个基类型Node类型，因此所有节点类型都共享着相同的基本属性和方法；

Node类型图：

Node类型图

Document和Element类型与HTMLDocument和HTMLElement类型之间是有严格的区分的；Document类型代表一个HTML或XML文档，而HTMLDocment只是代表一个HTML文档，XMLDocument代表是XML文档；Element类型代表该文档中的一个元素，而HTMLElement只是HTML文档中的元素，不是XMLDocument中的元素；

HTMLElement的很多子类型代表HTML元素的具体类型，每个类型具有多个Javascript属性，这些属性对应具体的元素或元素组的HTML元素特性；这些具体的元素类也定义了额外的属性和方法，它们并不是简单的映射HTML元素及HTML元素特性；

每个节点都有一个nodeType属性，用于表明节点的类型；

节点类型由在Node类型中定义的下列12个常数值来表示；

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
node .DOCUMENT_FRAGEMENT_NODE(11)
Node.NOTATION_NODE(12)

 <div id="mydiv">零点程序员</div>
<script>
var mydiv = document.getElementById("mydiv");
console.log(mydiv.nodeType);  // 1
console.log(Node.ELEMENT_NODE);  // 1
if(mydiv.nodeType == Node.ELEMENT_NODE)
    alert("mydiv is an element");
// IE8以下不支持，可以如此判断
if(mydiv.nodeType == 1)
alert("IE8: mydiv is an element");
</script>

Node属性：

nodeName : String，节点的名字，取决于节点的类型；

nodeValue : String，节点的值，取决于节点的类型；

nodeType : Number，节点的类型常数值之一；

注：对于元素节点，nodeName保存的始终是元素的标签名，而nodeValue的值为null；因此在使用nodeName及nodeValue时，最好先检测一下节点的类型；

 var mydiv = document.getElementById("mydiv");
console.log(mydiv.nodeType);  // 1
console.log(mydiv.nodeName);  // DIV
console.log(mydiv.nodeValue);  // null
if(mydiv.nodeType == Node.ELEMENT_NODE){
    console.log(mydiv.nodeType);  // 1
    console.log(mydiv.nodeName);  // DIV
}
var txt = mydiv.firstChild;
if(txt.nodeType == Node.TEXT_NODE){
    console.log("nodeType:" + txt.nodeType);  // 3
    console.log("nodeName:" + txt.nodeName);  // #text
    console.log("nodeValue:" + txt.nodeValue);  // 零点程序员
}

文档中所有节点之间都存在着各种关系，理清这些关系是非常重要的；

childNodes属性：

返回NodeList类型的所有子节点集合;

NodeList是一种类数组的对象，用于保存一组有序的节点，可以通过方括号来访问保存在其中的节点，其拥有length 属性；

 <div id="mydiv">
    <h2>零点程序员</h2>
    <h3>zeronetwork</h3>
    <div>从事IT教育，开展<a href="#">Web前端</a>、后端开发教育</div>
</div>
<script>
var mydiv = document.getElementById("mydiv");
// dom.html:16 NodeList(7) [text, h2, text, h3, text, div, text]
console.log(mydiv.childNodes); 
console.log(mydiv.childNodes.length);  // 7
var firstChild = mydiv.childNodes[1];  // 如果是0，即#text节点，此处是个空格
console.log(firstChild);    // <h2>零点程序员</h2>
console.log(firstChild.nodeName);  // H2
var secondChild = mydiv.childNodes.item(3);
console.log(secondChild);  // <h3>zeronetwork</h3>
</script>

注：mydiv有三个子节点，但length却是7个，多出4个text节点，此text节点，实际上是代码中的换行或空格，如果把html代码删除换行或空格，length结果就是3；

NodeList对象的特点：是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中；

 var mydiv = document.getElementById("mydiv");
console.log(mydiv.childNodes.length); // 7
var p = document.createElement("p");
p.innerText = "大师哥王唯";
mydiv.appendChild(p);
console.log(mydiv.childNodes.length);  // 8

在实际应用中，有可能需要将NodeList对象转换成数组：

 var mydiv = document.getElementById("mydiv");
var arrNodes = Array.prototype.slice.call(mydiv.childNodes,0);
console.log(arrNodes);

children 属性：

IE与其他浏览器对文本节点中空白符的解释不一致，导致了children属性出现；这个属性是HTMLCollection的实例，其中只包含元素的子节点中那些也是元素的节点，即children列表中只包含Element元素；

children并不是标准属性，但所有的浏览器都实现了该属性；

 var myList = document.getElementById("myList");
var lis = myList.children;
console.log(lis);
console.log(lis.length);

Text和Comment节点没有children属性；

HTMLCollection类型：

是一个接口，表示HTML 元素的集合，与NodeList非常类似，也是个类数组对象；元素在 HTMLCollection 对象中的顺序与它们在文档源代码中出现的顺序一样；

HTMLCollection类型的属性和方法：

item()方法：返回 HTMLCollection 中指定索引的元素；

length属性：返回 HTMLCollection 中元素的数量；

namedItem()方法：返回 HTMLCollection 中指定 ID 或 name 属性的元素；

 console.log(lis.item(0));
console.log(lis[0]);  // 一般用这个代替
console.log(lis.namedItem("myli"));
console.log(lis["myli"]);  // 一般用这个代替

与NodeList类型一样，HTMLCollection对象也是实时动态的；

parentNode属性：

指向节点的父节点；

一个元素节点的父节点可能是一个元素(Element )节点，也可能是一个文档(Document )节点，或者是个文档碎片(DocumentFragment)节点；

对于Document、DocumentFragment和Attr对象来说，其parentNode属性为null，因为它们没有父节点；

另外，如果当前节点刚刚被建立，还没有被插入到DOM树中，则该节点的parentNode属性也返回null；

 var elt = document.getElementById("elt");
if(elt.parentNode){
    elt.parentNode.removeChild(elt);
}

parentElement属性：

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null；parentElement是一个DOM元素对象（HTMLElement对象）；

 if(elt.parentElement)
    elt.parentElement.style.backgroundColor = "purple";

在早期，parentElement是ie专用的，而现在所有的浏览器都已经实现了，并且被纳入了最新的DOM4规范中；

parentElement匹配的是parent为Element的情况，而parentNode匹配的则是parent为Node的情况；Element是包含在Node里的，它的nodeType是1；一般情况parentNode可以取代parentElement的所有功能；

最能体现两者的区别是以下两行代码：

 console.log(document.documentElement);  // <html>
console.log(document.documentElement.parentNode);  // #document
console.log(document.documentElement.parentElement);  // null

previousSibling: 前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null；

nextSibling : 后一个兄弟节点：如果这个节点就是最后一个兄弟节点，那么该值为null；

 var mydiv = document.getElementById("mydiv");
console.log(mydiv.parentNode);  // <body>
var firstChild = mydiv.childNodes[0];  // 把0换成1或2
console.log(firstChild.previousSibling);
console.log(firstChild.nextSibling);
if(firstChild.nextSibling === null)
    console.log("child is last node");
else
console.log("child is't last node");
// 遍历
var elt = document.getElementById("elt");
while(elt){
    console.log(elt.nodeName);
    elt = elt.nextSibling;
}

firstChild : 指向在childNodes集合中的第一个节点；

lastChild : 指向在childNodes集合中最后一个节点；

即firstChild始终指向childNodes[0]；lastChild指向childNodes[someNode.childNodes.length – 1]；

 var mydiv = document.getElementById("mydiv");
var firstChild = mydiv.firstChild;
var lastChild = mydiv.lastChild;
console.log(firstChild);
console.log(lastChild);

注：当只有一个子节点的情况下，firstChild和lastChild指向同一个节点；如果没有子节点，均为null；并不是每种节点都有子节点；

 <div id="mydiv"><h2>零点<span>程序员</span></h2></div>
<script>
    var textChild = mydiv.firstChild.firstChild;
    console.log(textChild.nodeType);  // 3 文本节占
    console.log(textChild.childNodes); // 空的NodeList[]
</script>

textChild指的是零点，而不是零点<span>程序员</span>；

ownerDocument 属性:

指向这个节点所属的文档节点（也就是顶层节点）；

任何节点都属于它所在的文档，任何节点都不能同时存在于两个或多个文档中，通过这个属性不必层层回溯到顶端，而是直接访问到文档节点；

 var mydiv = document.getElementById("mydiv");
console.log(mydiv.ownerDocument); // #document
var innerDiv = document.getElementById("innerDiv");
console.log(innerDiv.ownerDocument); // #document
console.log(mydiv.ownerDocument.documentElement);  // <html>

节点层次关系图：

节点层次关系图

Node方法（操作节点）：

appendChild(node) : 将node添加到childNodes的末尾; 添加节点后，childNodes的新添节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新；更新后，appendChild()返回新增的节点；

 var mydiv = document.getElementById("mydiv");
var p = document.createElement("p");
p.innerText = "大师哥王唯";
var returnP = mydiv.appendChild(p);
console.log(mydiv.lastChild);  // <p>大师哥王唯</p>
console.log(p === returnP);  // true

如果传入appendChild()的节点已经是文档的一部分了，就将该节点从原来的位置转移到新位置；即任何DOM节点不能同时出现在文档中的多个位置上；

 <script>
var mydiv = document.getElementById("mydiv");
var yourdiv = document.getElementById("yourdiv");
// 注：把最后的子元素的空白符删除
var returnDiv = yourdiv.appendChild(mydiv.lastChild);
console.log(returnDiv === mydiv.lastChild);  //  false 
console.log(returnDiv === yourdiv.firstChild);  // true
</script>

如果在调用appendChild()方法时，传入了父节点的第一个子节点，那么，该节点就会成为父节点中的最后一个子节点，如：

 // 注意html中的换行空格
var mydiv = document.getElementById("mydiv");
console.log(mydiv.firstChild);
mydiv.appendChild(mydiv.firstChild);
console.log(mydiv.firstChild);

需要注意的问题；

 var divs = document.getElementsByTagName("div");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "按钮";
for(var i=0; i<divs.length; i++){
    console.log(divs[i]);
    divs[i].appendChild(btn);
}

本来的意图是为了给所有的div添加input子元素，可却终只是最后的div添加了，原因是一个元素只能有一个父元素，起先，第一个div的确添加了input的元素，便是循环中的appendChild()会让元素从原来的位置转移到新位置；

改写：把创建btn的代码放到for循环内，即可达到目的；

由于appendChild()返回的是被追加的子元素，所以在链式调用时不能随便使用；

 var elt = document.createElement('p').appendChild(document.createElement('b'));
console.log(elt);  // elt为<b></b>

本意是返回一个p节点，并且这个p元素包含一个b的子节点，但实际上elt为b；

 // 改成
var elt = document.createElement('p')
elt.appendChild(document.createElement('b'));
console.log(elt);  // <p>
document.body.appendChild(elt);

insertBefore(newnode, refnode)方法：

在childNodes中的refnode之前插入newcode，并返回这个节点；

插入节点后，被插入的节点（新节点）会变成参照节点的前一个兄弟节点；如果参照节点是null，则与appendChild()执行相同的操作；

 var mydiv = document.getElementById("mydiv");
var p = document.createElement("p");
p.innerText = "大师哥王唯";
// 或者参照mydiv.firstChild节点
var returnP = mydiv.insertBefore(p,null);  // 插入后成为最后一个子节点
console.log(mydiv.lastChild);  // <p>大师哥王唯</p>
var returnP = mydiv.insertBefore(p, mydiv.firstChild);  // 插入后成为第一个子节点
console.log(mydiv.firstChild);  // <p>大师哥王唯</p>
var returnP = mydiv.insertBefore(p, mydiv.lastChild);  // 插入到最后子节点的前面
console.log(mydiv.childNodes[mydiv.childNodes.length - 2]);// <p>大师哥王唯</p>
var returnP = mydiv.insertBefore(p,mydiv.childNodes[1]);  // 插入到任意节点的前面
console.log(mydiv.childNodes[1]);  // <p>大师哥王唯</p>
var yourdiv = document.getElementById("yourdiv");
yourdiv.insertBefore(mydiv.childNodes[1],null);//把mydiv的子节点插入到yourdiv中

参照节点refnode是必选参数，如果没有，则传null，否则会抛出异常；如果传递undefined，则会隐式转换；

 // mydiv.insertBefore(elt); // 异常
mydiv.insertBefore(elt,undefined); // undefined隐式转换
// mydiv.insertBefore(elt,"undefined"); // 异常

如果给定的子节点是文档中现有的节点，insertBefore() 会将其从当前位置移动到新位置；

 var elt = document.getElementById("elt");
var mydiv = document.getElementById("mydiv");
mydiv.insertBefore(elt,mydiv.firstChild); // elt被移到mydiv内的第一个位置

提供一个使用索引位置插入节点的简单函数；

 // 将child节点插入到parent中，使其成为第n个子节点
function insertAt(parent, child, index){
    if(index < 0 || index > parent.childNodes.length)
        throw new Error("invalid index.");
    else if(index == parent.childNodes.length)
        parent.appendChild(child);
    else
        parent.insertBefore(child, parent.childNodes[index]);
}
var mydiv = document.getElementById("mydiv");
insertAt(mydiv,document.createTextNode("零点程序员"),mydiv.childNodes.length);
没有insertAfter()方法，不过，可以使用insertBefore()和nextSibling()来模拟它；
// 如果refNode就是最后一个子节点，那么refNode.nextSibling为null
Element.prototype.insertAfter = function(newNode,refNode){
    this.insertBefore(newNode, refNode.nextSibling);
}
mydiv.insertAfter(elt,mydiv.firstChild);  // 插入到第二个位置
mydiv.insertAfter(elt,mydiv.lastChild);  // 插入到最后

removeChild(node)方法：

移除子节点，并返回被移除节点

 var mydiv = document.getElementById("mydiv");
var deleteChild = mydiv.removeChild(mydiv.firstChild);
console.log(deleteChild);
// 删除的节点还可以再次使用
var yourdiv = document.getElementById("yourdiv");
yourdiv.appendChild(deleteChild);
console.log(yourdiv.firstChild);

被移除的节点仍然还在文档中，但它在文档中已经没有了自己的位置，但如果被删除节点没有变量引用它，在一定的时间内将会被内存管理器回收；

但如果被删除的子节点，一开始就被变量引用，即使该节点被删除，其还被保持着引用；

 var mydiv = document.getElementById("mydiv");
var deleteChild = mydiv.removeChild(mydiv.firstChild);
console.log(deleteChild === mydiv.firstChild);  // false
// 改成
var deleteChild = mydiv.firstChild;
var returnChild = mydiv.removeChild(deleteChild);
console.log(deleteChild === returnChild); // true

removeChild()方法是在父节点上调用的，所以删除一个节点，一定先定位好父节点再删除子节点，比如要删除当前的元素，可以：

 node.parentNode.removeChild(node);

删除所有子节点；

 var mydiv = document.getElementById("mydiv");
for(var i=mydiv.childNodes.length-1; i>=0; i--){
    console.log(mydiv.childNodes[i]);
    mydiv.removeChild(mydiv.childNodes[i]);
}
console.log(mydiv);

为什么由后往前删除，因为childNodes返回的列表是动态的，每一次访问它都是被删除一个后的列表；因此，如果只是单纯的删除所有子节点，可以：

 // 更简单的删除，或者把firstChild换成lastChild也可以
while(mydiv.firstChild)
    mydiv.removeChild(mydiv.firstChild);

replaceChild(newnode, oldnode) 方法:

删除一个子节点并用一个新的节点取而代之，即将childNodes中的oldnode 替换成newnode；

会返回被替换的节点oldnode，并从文档树中删除；

 <div id="yourdiv">temp</div>
<script>
var mydiv = document.getElementById("mydiv");
var p = document.createElement("p");
p.innerText = "大师哥王唯";
var child = mydiv.replaceChild(p, mydiv.firstChild);
console.log(child);
var yourdiv = document.getElementById("yourdiv");
if(yourdiv.hasChildNodes()){
    var child = yourdiv.replaceChild(mydiv.lastChild,yourdiv.firstChild);
}
</script>

定义一个环绕节点的函数：

 function roundNode(outerNodeString,innerNode){
    // 假如参数为字符串而不是节点，将其当做元素的id
    if(typeof innerNode == "string")
        innerNode = document.getElementById(innerNode);
    var parent = innerNode.parentNode;  // 取得父节点
    var outerNode = document.createElement(outerNodeString);
    parent.replaceChild(outerNode, innerNode);
    outerNode.appendChild(innerNode);
    return outerNode;
}
var mydiv = document.getElementById("mydiv");
roundNode("div",mydiv).style.color = "red";

cloneNode()方法：

用于创建调用这个方法的节点的一个完全相同的副本；

其接受一个参数，表示是否执行深复制，true为深复制，即复制节点及其整个子节点树； false，则为浅复制，即只复制节点本身，节点所包含的文本也不会被复制，默认为false；

 var mydiv = document.getElementById("mydiv");
var cloneDiv = mydiv.cloneNode(true);
console.log(cloneDiv);

或

 <ul id="mylist">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>Javascript</li>
</ul>
<script>
var myList = document.getElementById("mylist");
var deepList = myList.cloneNode(true);
var shallowList = myList.cloneNode(false);
console.log(deepList.childNodes.length);  // 7
console.log(shallowList.childNodes.length); // 0
</script>

复制后的节点副本属于文档所有，但并没有父节点，因此需要通过appendChild()、insertBefore或replaceChild将它添加文档中；

 console.log(mydiv.parentNode);  // <body>
console.log(cloneDiv.parentNode);  // null
var yourdiv = document.getElementById("yourdiv");
yourdiv.appendChild(cloneDiv);  // 不符合标准，因为有两个id为mydiv元素
console.log(cloneDiv.parentNode);  // <div id="yourdiv">

cloneNode()方法不会复制添加到DOM节点中的Javascript属性，如事件处理程序等，但会复制特性、子节点；但如果是在标签中直接添加的on事件，也会被复制，因为它是被当作特性复制的；

 var myList = document.getElementsByTagName("ul")[0];
var li3 = myList.childNodes[5]; // 第3个li
li3.addEventListener("click",function(e){
    alert(this.innerText);
},false);
var deepList = myList.cloneNode(true);
var yourdiv = document.getElementById("yourdiv");
yourdiv.appendChild(deepList);

如果原始节点设置了ID，并且克隆节点会被插入到相同的文档中，那么就应该修改克隆节点的ID以保证其唯一性；

 console.log(deepList.id);  // mylist
deepList.id = "deeplist";
console.log(deepList.id);  // deeplist

normalize()方法：

合并节点，该方法唯一的作用就是处理文档树中的文本节点；由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况；当在某个节点上调用该方法时，就会在该节点的后代节点中查找上述两种情况；如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点；

hasChildNodes()方法：

判断节点是否有子节点，会返回一个布尔值；

 var mydiv = document.getElementById("mydiv");
console.log(mydiv.childNodes.length);
console.log(mydiv.hasChildNodes());
if(mydiv.hasChildNodes())
    console.log("有子节点");
else
console.log("无");
// 如果源文件中有空白符，删除的是空白文本节点
if(mydiv.hasChildNodes())
    mydiv.removeChild(mydiv.firstChild);
// 全部删除
while(mydiv.hasChildNodes())
    mydiv.removeChild(mydiv.firstChild);

总结：判断一个节点是否有子节点，有三种方式；

node.firstChild !== null、node.childNodes.length > 0、node.hasChildNodes()方法；

contains()方法：

在实际开发中，经常需要知道某个节点是不是另一个节点的后代；其接受一个后代节点，用于判断是否为当前元素的后代节点，如果是，返回true，否则为false；

 console.log(document.documentElement.contains(document.body));
// 检查一个元素是否是body元素的后代元素且非body元素本身
function isInPage(node){
    return (node === document.body) ? false : document.body.contains(node);
}
console.log(isInPage(mydiv));

Web前端开发之Javascript-零点程序员-王唯

智云一二三科技

第40节 DOM文档对象模型-Javascript-王唯

关于作者: 智云科技

给这篇文章的作者打赏

关于作者: 智云科技

相关文章

Map和List的几种遍历方式

全网大佬都在用的Java+Python这两套视频学习教程，学习很重要

JavaWeb快速进阶全套教程(程序员必备2020版)：视频+笔记+源码

热门文章

1分享新浪图床上传接口源码

2PHP简单实现路由Route功能

3Tideways、xhprof 和 xhgui 打造 PHP 非侵入式监控平台

4centos系统如何查看是否安装了mysql

5curl 工具简述