Skip to content

Instantly share code, notes, and snippets.

@BcRikko

BcRikko/IdAndTagName.js

Created April 10, 2015 02:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BcRikko/db2ba90015e6201d33ad to your computer and use it in GitHub Desktop.
Save BcRikko/db2ba90015e6201d33ad to your computer and use it in GitHub Desktop.
Download ZIP
getElementsByTagNameとquerySelectorAllの違いについて
Raw
getElementsByTabName.js
var tagName = document.getElementsByTagName('li');
// 2
console.log(tagName.length);
var list1Item = document.createElement('li');
list1Item.innerText = 'List1_Item2';
document.getElementById('list1').appendChild(list1Item);
var list2Item = document.createElement('li');
list2Item.innerText = 'List2_Item2';
document.getElementById('list2').appendChild(list2Item);
// 4（動的なNodeList）
console.log(tagName.length);
Raw
IdAndTagName.js
var list = document.getElementById('list1').getElementsByTagName('li');
// 1
console.log(list.length);
var list1Item = document.createElement('li');
list1Item.innerText = 'List1_Item2';
document.getElementById('list1').appendChild(list1Item);
var list2Item = document.createElement('li');
list2Item.innerText = 'List2_Item2';
document.getElementById('list2').appendChild(list2Item);
// 2（動的なNodeList）
console.log(list.length);
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8' />
<title>getElementsByTagName - querySelectorAll</title>
</head>
<body>
<ul id="list1">
<li>List1_Item1</li>
</ul>
<ul id="list2">
<li>List2_Item1</li>
</ul>
<script src="app.js"></script>
</body>
</html>
Raw
querySelectorAll.js
var querySelector = document.querySelectorAll('#list1 > li');
// 1
console.log(querySelector.length);
var list1Item = document.createElement('li');
list1Item.innerText = 'List1_Item2';
document.getElementById('list1').appendChild(list1Item);
var list2Item = document.createElement('li');
list2Item.innerText = 'List2_Item2';
document.getElementById('list2').appendChild(list2Item);
// 1（静的なNodeList）
console.log(querySelector.length);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment