javascript初学总结_3

冷不防 2022-07-15 13:09 130阅读 0赞

#### 1.Document.creatDocumentFragment() ####

定义：

创建一个新的空白文档片段DocumentFragment

(ps:DocumentFragment()构造函数也可以新创建一个DocumentFragment对象，且该函数的返回值就是新创建的DocumentFragment对象，

方法：

fragment = new DocumentFragment();

)

语法：

var docFragment = document.createDocumentFragment();

doFragment是一个对空白文档片段DocumnetFragment对象的引用，因此不会产生副本。

描述：

DocumentFragments 是一些DOM节点。它们不是DOM树的一部分。通常的使用场景是创建一个文档片段，然后将创建的DOM元素插入到文档片段中，最后把文档片段插入到DOM树中。在DOM树中，文档片段会被替换为它所有的子元素。

实例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <ul><li>Coffee</li><li>Tea</li></ul>
    <p id="demo">单击按钮更改列表项,使用createDocumentFragment方法,然后在列表的最后一个孩子添加列表项。</p>
    <button οnclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var d=document.createDocumentFragment();
    	d.appendChild(document.getElementsByTagName("LI")[0]);
    	d.childNodes[0].childNodes[0].nodeValue="Milk";
    	document.getElementsByTagName("UL")[0].appendChild(d);
    };
    
    </script>
    
    </body>
    </html>

运行结果：

运行前：![20161023154945507][]

运行后：![20161023155004995][]

（补充：另外几种常用的动态创建html节点的方法：

creatAttribute(name)   用指定名称name创建特性节点；

实例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
    .democlass{
    	color:red;
    }
    </style>
    </head>
    <body>
    
    <h1>Hello World</h1>
    <p id="demo">单击按钮来创建一个“类”属性值“democlass”插入到上面的H1元素。</p>
    <button οnclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var h1=document.getElementsByTagName("H1")[0];
    	var att=document.createAttribute("class");
    	att.value="democlass";
    	h1.setAttributeNode(att);
    }
    </script>
    
    </body>
    </html>

creatElement(tagName) 创建标签名尾tagname的节点；

creatTextNode(text) 创建包含文本text的文本节点；

实例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p id="demo">单击按钮创建有文本的按钮</p>
    <button οnclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var btn=document.createElement("BUTTON");
    	var t=document.createTextNode("CLICK ME");
    	btn.appendChild(t);
    	document.body.appendChild(btn);
    };
    
    </script>
    
    </body>
    </html>

）

#### 2.appendChild()方法 ####

定义和用法：appendChild() 方法向节点添加最后一个子节点；appendChild()方法也可以实现将一个元素转移到另一个元素中。

实例：

<!DOCTYPE html>
    <html>
    <body>
    
    <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
    <ul id="myList2"><li>Water</li><li>Milk</li></ul>
    
    <p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
    
    <button οnclick="myFunction()">亲自试一试</button>
    
    <script>
    function myFunction()
    {
    var node=document.getElementById("myList2").lastChild;
    document.getElementById("myList1").appendChild(node);
    }
    </script>
    
    </body>
    </html>

运行结果：

运行前：![20161023155717818][]

运行后：![20161023155733088][]

感悟：appenChild在实现的过程中，会先找到将要被添加的节点的位置，然后实行节点转移，而不是复制。

#### 3.localeCompare()方法‘ ####

语法：

stringObject.localeCompare(target)

参数target是要以本地特定顺序与stringObject进行比较的字符串；

返回值：

说明比较结果的数字。如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target，则该方法返回大于 0 的数。如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。

#### 4.sort()方法 ####

定义和用法

sort()方法用于对数组的元素进行排序。

语法：

arrayObject.sort(sortby)

参数sortby规定排序方法，必须是函数

返回值：

对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

说明：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，若a<b,a排在b前面，且返回一个小于0的值，若a=b,则返回0，若a>b,则返回一个大于0的值。

实例：

运行结果：

10，5，40，25，1000，1

1，5，10，25，40，1000

[20161023154945507]: /images/20220715/ae86343747514144b540bae58d0514be.png
[20161023155004995]: /images/20220715/b8f5eed49a1f435f98a8901281d02e64.png
[20161023155717818]: /images/20220715/e69b59d336f7497fb226ef58697422e3.png
[20161023155733088]: /images/20220715/682df7e4e35b49a38cbf09dd449cc402.png