Skip to content

Commit 04ceade

Browse files
ruanyfruanyf
committed
修改dom/document
1 parent 0b2c0e2 commit 04ceade

File tree

2 files changed

+130
-36
lines changed

2 files changed

+130
-36
lines changed

‎dom/document.md‎

Lines changed: 118 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -349,22 +349,34 @@ var elem = document.forms["myForm"];
349349
350350
## document对象的方法
351351
352-
### document.write()
352+
document对象主要有以下一些方法。
353353
354-
document.write方法用于向页面写入内容。
354+
### open()，close()，write()，writeln()
355355
356-
```javascript
356+
document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容。不要将此方法与window.open()混淆，后者用来打开一个新窗口，与当前文档无关。
357357
358-
document.addEventListener("DOMContentLoaded", function(event) {
359-
document.write('<p>Hello World!</p>');
360-
});
358+
document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。如果再调用write方法，就等同于又调用open方法，新建一个文档，再写入内容。
359+
360+
document.write方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
361361
362+
```js
363+
// 页面显示“helloworld”
364+
document.open();
365+
document.write("hello");
366+
document.write("world");
367+
document.close();
362368
```
363369
364-
需要注意的是，如果在页面已经渲染完成的情况下调用这个方法，会把原有的页面全部抹去，等于是在一个新建的页面上写入内容。上面的那段代码，实际执行效果如下。
370+
如果页面已经渲染完成（DOMContentLoaded事件发生之后），再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。
365371
366372
```javascript
367373
374+
document.addEventListener("DOMContentLoaded", function(event) {
375+
document.write('<p>Hello World!</p>');
376+
});
377+
378+
// 等同于
379+
368380
document.addEventListener("DOMContentLoaded", function(event) {
369381
document.open();
370382
document.write('<p>Hello World!</p>');
@@ -373,23 +385,76 @@ document.addEventListener("DOMContentLoaded", function(event) {
373385
374386
```
375387
376-
为了避免这种情况，一般document.write只能在页面渲染的过程中使用。
388+
如果在页面渲染过程中调用write方法，并不会调用open方法。（可以理解成，open方法已调用，但close方法还未调用。）
389+
390+
```html
391+
<html>
392+
<body>
393+
hello
394+
<script type="text/javascript">
395+
document.write("world")
396+
</script>
397+
</body>
398+
</html>
399+
```
400+
401+
在浏览器打开上面网页，将会显示“hello world”。
402+
403+
需要注意的是，虽然调用close方法之后，无法再用write方法写入内容，但这时当前页面的其他DOM节点还是会继续加载。
404+
405+
```html
406+
<html>
407+
<head>
408+
<title>write example</title>
409+
<script type="text/javascript">
410+
document.open();
411+
document.write("hello");
412+
document.close();
413+
</script>
414+
</head>
415+
<body>
416+
world
417+
</body>
418+
</html>
419+
```
420+
421+
在浏览器打开上面网页，将会显示“hello world”。
422+
423+
总之，除了某些特殊情况，应该尽量避免使用document.write这个方法。
424+
425+
document.writeln方法与write方法完全一致，除了会在输出内容的尾部添加换行符。
426+
427+
```js
428+
document.write(1);
429+
document.write(2);
430+
// 12
431+
432+
document.writeln(1);
433+
document.writeln(2);
434+
// 1
435+
// 2
436+
//
437+
```
438+
439+
注意，writeln方法添加的是ASCII码的换行符，渲染成HTML网页时不起作用。
440+
441+
### hasFocus()
442+
443+
document.hasFocus方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
377444
378445
```javascript
379446
380-
<div>
381-
<script type="text/javascript">
382-
document.write("<h1>Main title</h1>")
383-
</script>
384-
</div>
447+
focused = document.hasFocus();
385448
386449
```
387450
388-
上面的代码会在页面中插入一行h1，而不改变其他的代码。
451+
注意，有焦点的文档必定被激活（active），反之不成立，激活的文档未必有焦点。比如如果用户点击按钮，从当前窗口跳出一个新窗口，该新窗口就是激活的，但是不拥有焦点。
452+
453+
### querySelector()，getElementById()，querySelectorAll()，getElementsByTagName()，getElementsByClassName()，getElementsByName()，elementFromPoint()
389454
390-
除了某些特殊情况，应该尽量避免使用这个方法。
455+
以下方法用来选中当前文档中的元素。
391456
392-
### querySelector()，getElementById()，querySelectorAll()，getElementsByTagName()，getElementsByClassName()
457+
**（1）querySelector()**
393458
394459
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
395460
@@ -400,6 +465,8 @@ var el2 = document.querySelector('#myParent > [ng-click]');
400465
401466
querySelector方法无法选中CSS伪元素。
402467
468+
**（2）getElementById()**
469+
403470
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。
404471
405472
```javascript
@@ -417,6 +484,8 @@ document.querySelector('#myElement')
417484
418485
上面代码中，两个方法都能选中id为myElement的元素，但是getElementById()比querySelector()效率高得多。
419486
487+
**（3）querySelectorAll()**
488+
420489
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
421490
422491
```javascript
@@ -453,6 +522,8 @@ document.querySelectorAll('DIV, A, SCRIPT');
453522
454523
与querySelector方法一样，querySelectorAll方法无法选中CSS伪元素。
455524
525+
**（4）getElementsByClassName()**
526+
456527
getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
457528
458529
```javascript
@@ -470,6 +541,8 @@ document.getElementsByClassName('red test');
470541
471542
上面代码返回class同时具有red和test的元素。
472543
544+
**（5）getElementsByTagName()**
545+
473546
getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
474547
475548
```javascript
@@ -480,35 +553,36 @@ var paras = document.getElementsByTagName("p");
480553
481554
注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。
482555
483-
### getElementsByName()
556+
**（6）getElementsByName()**
484557
485-
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object。
558+
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
486559
487560
```javascript
488561
489562
// 假定有一个表单是<form name="x"></form>
490-
491563
var forms = document.getElementsByName("x");
492564
forms[0].tagName // "FORM"
493565
494566
```
495567
496-
上面代码表明getElementsByName方法的返回值是一组对象，必须用方括号运算符取出单个对象。
568+
注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。
497569
498-
### hasFocus()
570+
**（7）elementFromPoint()**
499571
500-
hasFocus()方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
572+
elementFromPoint方法返回位于页面指定位置的元素。
501573
502574
```javascript
503-
504-
focused = document.hasFocus();
505-
575+
var element = document.elementFromPoint(x, y);
506576
```
507577
508-
如果用户点击按钮，从当前窗口跳出一个新窗口。在用户使用鼠标点击该窗口之前，该新窗口就不拥有焦点。
578+
上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。
509579
510580
### createElement()，createTextNode()，createAttribute()，createDocumentFragment()
511581
582+
以下方法用于生成元素节点。
583+
584+
**（1）createElement()**
585+
512586
createElement方法用来生成HTML元素节点。
513587
514588
```javascript
@@ -519,6 +593,8 @@ var newDiv = document.createElement("div");
519593
520594
createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即&lt;和&gt;）或者是null，会报错。
521595
596+
**（2）createTextNode()**
597+
522598
createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
523599
524600
```javascript
@@ -529,6 +605,8 @@ newDiv.appendChild(newContent);
529605
530606
上面代码新建一个div节点和一个文本节点，然后将文本节点插入div节点。
531607
608+
**（3）createAttribute()**
609+
532610
createAttribute方法生成一个新的属性对象节点，并返回它。
533611
534612
```javascript
@@ -551,6 +629,8 @@ node.setAttribute("my_attrib", "newVal");
551629
552630
```
553631
632+
**（4）createDocumentFragment()**
633+
554634
createDocumentFragment方法生成一个DocumentFragment对象。
555635
556636
```javascript
@@ -596,6 +676,10 @@ document.dispatchEvent(event);
596676
597677
### createNodeIterator()，createTreeWalker()
598678
679+
以下方法用于遍历元素节点。
680+
681+
**（1）createNodeIterator()**
682+
599683
createNodeIterator方法返回一个DOM的子节点遍历器。
600684
601685
```javascript
@@ -637,6 +721,8 @@ currentNode === previousNode // true
637721
638722
有一个需要注意的地方，遍历器返回的第一个节点，总是根节点。
639723
724+
**（2）createTreeWalker()**
725+
640726
createTreeWalker方法返回一个DOM的子树遍历器。它与createNodeIterator方法的区别在于，后者只遍历子节点，而它遍历整个子树。
641727
642728
createTreeWalker方法的第一个参数，是所要遍历的根节点，第二个参数指定所要遍历的节点类型。
@@ -656,6 +742,10 @@ while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
656742
657743
### adoptNode()，importNode()
658744
745+
以下方法用于获取外部文档的节点。
746+
747+
**（1）adoptNode()**
748+
659749
adoptNode方法将某个节点，从其原来所在的文档移除，插入当前文档，并返回插入后的新节点。
660750
661751
```javascript
@@ -668,6 +758,8 @@ importNode方法从外部文档拷贝指定节点，插入当前文档。
668758
var node = document.importNode(externalNode, deep);
669759
```
670760
761+
**（2）importNode()**
762+
671763
importNode方法的第一个参数是外部节点，第二个参数是一个布尔值，表示对外部节点是深拷贝还是浅拷贝，默认是浅拷贝（false）。虽然第二个参数是可选的，但是建议总是保留这个参数，并设为true。
672764
673765
另外一个需要注意的是地方是，上面代码只是将外部节点插入当前文档，这时该节点的父节点是null。下一步还必须将这个节点插入当前文档的DOM树。
@@ -680,13 +772,3 @@ document.getElementById("container").appendChild(newNode);
680772
```
681773
682774
上面代码从iframe窗口，拷贝一个指定节点myNode，插入当前文档。
683-
684-
### elementFromPoint()
685-
686-
elementFromPoint方法返回位于页面指定位置的元素。
687-
688-
```javascript
689-
var element = document.elementFromPoint(x, y);
690-
```
691-
692-
上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。

‎nodejs/fs.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,18 @@ fs.readFile('example_log.txt', function (err, logData) {
130130

131131
```
132132

133+
readFile方法是异步操作，所以必须小心，不要同时发起多个readFile请求。
134+
135+
```js
136+
for(var i = 1; i <= 1000; i++) {
137+
fs.readFile('./'+i+'.txt', function() {
138+
// do something with the file
139+
});
140+
}
141+
```
142+
143+
上面代码会同时发起1000个readFile异步请求，很快就会耗尽系统资源。
144+
133145
## mkdirSync()，writeFileSync()，readFileSync()
134146

135147
这三个方法是建立目录、写入文件、读取文件的同步版本。

0 commit comments

Comments
 (0)