getElementBydocument.getElementById('id') 回傳符合ID的單一物件，id前面不用加 #。因為id不會重複，只會回傳一筆資料。document.getElementsByClassName('class') class前面不用加 .。回傳符合的陣列型式物件
querySelectorHTML
<body>
<h1 class="h1">
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
</h1>
<script src="index.js"></script>
</body>
querySelector 只針對符合的第一筆資料
var el = document.querySelector('.class');
console.log(el);
el.textContent = "成功執行!!";
querySelectorAll 多選，撈取符合的全部資料，回傳陣列
JS
var els = document.querySelectorAll('h1 .test'); // 多重選擇器 可以連結多個 Selector
console.log(els) // [div.test, div.test, div.test]
for(var i = 0; i < els.length; i++){
els[i].textContent = "成功執行!!";
}
var data = document.getElementById('id').value;
document.getElementById('id').textContent = "抹茶";
var a = el.getAttribute('href') // 取得`<a> href 屬性`
var el = document.querySelector('.h1 a');
var text = el.textContent; // 取得標籤內容文字
var html = el.innerHTML;
HTML
<body>
<h1 class="h1">
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
<a href="#">我是連結</a>
</h1>
<script src="index.js"></script>
</body>
CSS
#website{
background-color: yellow;
}
JS
var el = document.querySelector('.h1 a')
el.setAttribute('href','https://gjlmotea.com'); // 改變`<a> href 屬性`
el.setAttribute('id', 'website'); // 動態新增`id`，就可以吃到樣式了
兩種動態操縱HTML標籤的方式
innerHTML 組完字串對語法渲染，效能快，安全性較差(XSS跨站攻擊)。除非來源是可以信任的資料(自己的data)而非使用者輸入，否則盡量少用。createElement 以DOM節點來處理，效率較差，安全性較高innerHtml、innerText、textContent 比較HTML
<body>
<p id="main">我是段落。</p>
<script src="index.js"></script>
</body>
JS
var el = document.querySelector('#main');
str = "<h1>今天天氣真好呀~</h1>"
el.innerHtml = str+str;
innerHtml修改內部HTML(會覆蓋掉當前的HTML內容)，可直接塞<tag>
HTML
<body>
<ul class="list"></ul>
<script src="index.js"></script>
</body>
JS
var el = document.querySelector('.list')
var displayText = "Google";
var url = "https://google.com";
el.innerHTML = '<li><a href="'+ url + '">' + displayText + '</a></li>';
innerText與textContent 雷同
僅返回可見文本
textContent塞進去的特殊符號文字會被轉碼成HtmlEncode< : <> : >
返回完整文本
createElement透過JS創建元素、描述元素節點，
再在掛載到其他節點上
不會動到、刪除到其他節點
appendChild依序加在後面
HTML
<body>
<h1 class="h1">建立內容中...</h1>
<script src="index.js"></script>
</body>
CSS
.blue{
color: blue;
}
JS
var str = document.createElement('p'); // 創建元素
str.textContent = "建立內容完畢!!"; // 描述內容
str.setAttribute('class','blue');
document.querySelector('.h1').appendChild(str); // 在母節點掛上欲掛載的子節點
iThome鐵人賽
看影片追技術