teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

7

a

2018/04/13 04:07

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -15,6 +15,9 @@
15
15
  ```
16
16
 
17
17
  # 参考
18
+
19
+ ## getElementsByClassName, querySelector
20
+
18
21
  [getElementsByClassName](https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName)
19
22
 
20
23
  > The Element.getElementsByClassName() メソッドは、引数で与えられたクラス名を含む全ての 子要素を ライブな HTMLCollectionで返します。 documentオブジェクトで呼ばれたとき、ルートノートを含む全ドキュメントが検索されます。
@@ -25,10 +28,12 @@
25
28
 
26
29
  > Document の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。
27
30
 
31
+ ## textContentとinnerTextの違い
32
+ [textContent](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent)
33
+
28
34
  [The poor, misunderstood innerText](http://perfectionkills.com/the-poor-misunderstood-innerText/)(※英語記事ですが、codePenのデモやパフォーマンス比較のグラフなどあるので分かりやすいです)
29
35
 
30
36
 
31
-
32
37
  # 補足
33
38
 
34
39
  `document.getElementsByClassName()`の他にも、`document.getElementsByTagName()`や`document.getElementById()`がありますが、メソッド名の一部が`Element`と単数形になっているのか、`Elements`と複数形になっているのかに着目をしてください。それによって、戻り値が単数なのか複数なのかもわかるかと思います。

6

a

2018/04/13 04:06

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -1,14 +1,34 @@
1
1
  ```
2
2
  document.getElementsByClassName("ace_content")[0].innerText;
3
3
  ```
4
+ or
5
+ ```
6
+ document.getElementsByClassName("ace_content")[0].textContent;
7
+ ```
8
+ or
9
+ ```
10
+ document.querySelector(".ace_content")[0].innerText;
11
+ ```
12
+ or
13
+ ```
14
+ document.querySelector(".ace_content")[0].textContent;
15
+ ```
4
16
 
5
17
  # 参考
6
- [https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName](https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName)
18
+ [getElementsByClassName](https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName)
7
19
 
8
20
  > The Element.getElementsByClassName() メソッドは、引数で与えられたクラス名を含む全ての 子要素を ライブな HTMLCollectionで返します。 documentオブジェクトで呼ばれたとき、ルートノートを含む全ドキュメントが検索されます。
9
21
 
10
22
  > 同様に、Document.getElementsByClassName() メソッドはドキュメント全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う**複数のelementを返します**。
11
23
 
24
+ [querySelector](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)
25
+
26
+ > Document の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。
27
+
28
+ [The poor, misunderstood innerText](http://perfectionkills.com/the-poor-misunderstood-innerText/)(※英語記事ですが、codePenのデモやパフォーマンス比較のグラフなどあるので分かりやすいです)
29
+
30
+
31
+
12
32
  # 補足
13
33
 
14
34
  `document.getElementsByClassName()`の他にも、`document.getElementsByTagName()`や`document.getElementById()`がありますが、メソッド名の一部が`Element`と単数形になっているのか、`Elements`と複数形になっているのかに着目をしてください。それによって、戻り値が単数なのか複数なのかもわかるかと思います。

5

a

2018/04/13 03:59

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -11,4 +11,4 @@
11
11
 
12
12
  # 補足
13
13
 
14
- `document.getElementsByClassName()`の他にも、`document.getElementsByTagName()`や`document.getElementById()`がありますが、メソッド名の一部が`Element`と単数形になっているのか、`Elements`と複数形になっているのかに着目をしてください。
14
+ `document.getElementsByClassName()`の他にも、`document.getElementsByTagName()`や`document.getElementById()`がありますが、メソッド名の一部が`Element`と単数形になっているのか、`Elements`と複数形になっているのかに着目をしてください。それによって、戻り値が単数なのか複数なのかもわかるかと思います。

4

a

2018/04/13 03:15

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -11,4 +11,4 @@
11
11
 
12
12
  # 補足
13
13
 
14
- `document.getElementsByClassName()`の他にも、`document.getElementsByTagName()`や`document.getElementById`がありますが、メソッド名の一部が`Element`と単数形になっているのか、`Elements`と複数形になっているのかに着目をしてください。
14
+ `document.getElementsByClassName()`の他にも、`document.getElementsByTagName()`や`document.getElementById()`がありますが、メソッド名の一部が`Element`と単数形になっているのか、`Elements`と複数形になっているのかに着目をしてください。

3

a

2018/04/13 03:14

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -7,4 +7,8 @@
7
7
 
8
8
  > The Element.getElementsByClassName() メソッドは、引数で与えられたクラス名を含む全ての 子要素を ライブな HTMLCollectionで返します。 documentオブジェクトで呼ばれたとき、ルートノートを含む全ドキュメントが検索されます。
9
9
 
10
- > 同様に、Document.getElementsByClassName() メソッドはドキュメント全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う**複数のelementを返します**。
10
+ > 同様に、Document.getElementsByClassName() メソッドはドキュメント全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う**複数のelementを返します**。
11
+
12
+ # 補足
13
+
14
+ `document.getElementsByClassName()`の他にも、`document.getElementsByTagName()`や`document.getElementById`がありますが、メソッド名の一部が`Element`と単数形になっているのか、`Elements`と複数形になっているのかに着目をしてください。

2

a

2018/04/13 03:14

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -7,4 +7,4 @@
7
7
 
8
8
  > The Element.getElementsByClassName() メソッドは、引数で与えられたクラス名を含む全ての 子要素を ライブな HTMLCollectionで返します。 documentオブジェクトで呼ばれたとき、ルートノートを含む全ドキュメントが検索されます。
9
9
 
10
- 同様に、Document.getElementsByClassName() メソッドはドキュメント全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う**複数のelementを返します**。
10
+ > 同様に、Document.getElementsByClassName() メソッドはドキュメント全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う**複数のelementを返します**。

1

a

2018/04/13 03:10

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -1,3 +1,10 @@
1
1
  ```
2
2
  document.getElementsByClassName("ace_content")[0].innerText;
3
- ```
3
+ ```
4
+
5
+ # 参考
6
+ [https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName](https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName)
7
+
8
+ > The Element.getElementsByClassName() メソッドは、引数で与えられたクラス名を含む全ての 子要素を ライブな HTMLCollectionで返します。 documentオブジェクトで呼ばれたとき、ルートノートを含む全ドキュメントが検索されます。
9
+
10
+ 同様に、Document.getElementsByClassName() メソッドはドキュメント全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う**複数のelementを返します**。