JavaScript是一門非常重要的編程語言，被廣泛應用于網站開發、移動應用等各個領域。今天，我們將從100個實用技巧的角度，來了解一下如何更好地應用JavaScript。
1. 通過選擇器獲取DOM元素
通過JavaScript，我們可以便捷地獲取DOM元素。例如，使用document.querySelector()可通過CSS選擇器語法獲取一個DOM元素。例如：

const myElement = document.querySelector('#my-element');

2. 獲取DOM元素的屬性
可以使用.getAttribute()方法獲取HTML元素的屬性。例如：

const myElementWidth = document.querySelector('#my-element').getAttribute('width');

3. 顯示和隱藏HTML元素
我們可以通過改變CSS屬性來控制HTML元素的顯示和隱藏。例如：

const myElement = document.querySelector('#my-element');
// 隱藏元素
myElement.style.display = 'none';
// 顯示元素
myElement.style.display = 'block';

4. 數組去重
我們可以使用Set對象和展開運算符來去掉重復項。例如：

const myArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(myArray)];

5. 創建跨瀏覽器XHR對象
我們可以使用XMLHttpRequest對象來實現異步HTTP請求。但是，由于不同瀏覽器的實現可能會有所不同，我們應該創建一個跨瀏覽器兼容的XMLHttpRequest對象。例如：

function createXHR() {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
} else if (typeof ActiveXObject !== 'undefined') {
if (typeof arguments.callee.activeXString !== 'string') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
i, len;
<br>
                for (i=0,len=versions.length; i<len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex) {
// 跳過
}
}
}
<br>
            return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error('No XHR object available.');
}
}

6. 字符串模板
我們可以使用字符串模板來方便地創建字符串。例如：

const name = '張三';
const age = 18;
const template = <code>我是${name}，今年${age}歲。</code>;

7. 替換所有匹配的字符串
我們可以使用正則表達式和replace()方法來替換所有匹配的字符串。例如：

const myString = '你好，世界！世界真大，世界真美！';
// 替換所有匹配的字符串
const newString = myString.replace(/世界/g, '地球');

8. 操作DOM元素的class
我們可以使用classList屬性來操作DOM元素的class。例如：

const myElement = document.querySelector('#my-element');
// 添加一個class
myElement.classList.add('my-class');
// 刪除一個class
myElement.classList.remove('my-class');
// 判斷是否含有一個class
myElement.classList.contains('my-class');

9. 將HTML轉為字符串
我們可以使用innerHTML屬性來將HTML元素轉換為字符串。例如：

const myElement = document.querySelector('#my-element');
const myHTMLString = myElement.innerHTML;

10. 創建函數節流
我們可以使用函數節流來限制函數的執行速度。例如：

function throttle(fn, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
}
};
}

以上是10個實用技巧，相信對于你來說已經有很大的幫助了。剩余的90個實用技巧，我們將在后續文章中進行分享，敬請關注！