// 讀操作：獲取元素純文本內(nèi)容
var text = element.innerText;
// 寫操作：設(shè)置純文本內(nèi)容（標(biāo)簽會被當(dāng)作普通文本）
element.innerText = "新文本內(nèi)容";

// 讀操作：獲取元素包含 HTML 標(biāo)簽的完整內(nèi)容
var html = element.innerHTML;
// 寫操作：設(shè)置帶 HTML 結(jié)構(gòu)的內(nèi)容（標(biāo)簽會被解析渲染）
element.innerHTML = "<span>新的HTML內(nèi)容</span>";

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // innerText 僅輸出文本，無標(biāo)簽、無換行
    console.log(div.innerText); // 輸出：hello world hello world
    // innerHTML 輸出完整 HTML 結(jié)構(gòu)，保留換行
    console.log(div.innerHTML); // 輸出：<span>hello world</span>（含換行）
    div.innerText = '<span>hello js</span>'; // 頁面顯示：<span>hello js</span>
    div.innerHTML = '<span>hello js</span>'; // 頁面顯示：hello js（解析為 span 標(biāo)簽）
</script>

<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    // 讀屬性：獲取完整 URL（src 會自動補(bǔ)全絕對路徑）
    console.log(img.src); // 輸出：http://xxx/rose.jpg
    console.log(img.alt); // 輸出：這是一朵花
    // 改屬性：點(diǎn)擊切換圖片
    img.onclick = function () {
        if (img.src.includes('rose.jpg')) {
            img.src = './rose2.png';
        } else {
            img.src = './rose.jpg';
        }
    }
</script>

<input type="button" value="播放">
<script>
    var btn = document.querySelector('input');
    btn.onclick = function () {
        // 三元表達(dá)式快速切換文本
        btn.value = btn.value === '播放' ? '暫停' : '播放';
    }
</script>

<input type="text" id="text" value="0">
<input type="button" id="btn" value='點(diǎn)我+1'>
<script>
    var text = document.querySelector('#text');
    var btn = document.querySelector('#btn');
    btn.onclick = function () {
        // 注意：value 是字符串，需轉(zhuǎn)為數(shù)字再計(jì)算
        var num = Number(text.value);
        text.value = num + 1;
    }
</script>

<input type="checkbox" id="all">我全都要 
<input type="checkbox" class="girl">貂蟬 
<input type="checkbox" class="girl">小喬 
<input type="checkbox" class="girl">安琪拉 
<input type="checkbox" class="girl">妲己 
<script>
    var all = document.querySelector('#all');
    var girls = document.querySelectorAll('.girl');
    // 全選/取消全選：同步所有子復(fù)選框狀態(tài)
    all.onclick = function () {
        girls.forEach(girl => girl.checked = all.checked);
    }
    // 單個選項(xiàng)取消：同步取消全選框
    girls.forEach(girl => {
        girl.onclick = function () {
            // 檢測所有子復(fù)選框是否都選中（轉(zhuǎn)為數(shù)組使用 every 方法）
            all.checked = [...girls].every(girl => girl.checked);
        }
    });
</script>

// 單個樣式修改
element.style.樣式名 = 樣式值;
// 多個樣式批量修改（用 cssText）
element.style.cssText = "樣式名1:值1; 樣式名2:值2;";

<div style="font-size: 20px; font-weight: 700;">哈哈</div>
<script>
    var div = document.querySelector('div');
    div.onclick = function () {
        // 解析當(dāng)前字體大?。ㄈサ?px 轉(zhuǎn)為數(shù)字）
        var curSize = parseInt(this.style.fontSize);
        this.style.fontSize = (curSize + 10) + "px"; // 放大 10px
        this.style.color = "red"; // 同時修改字體顏色為紅色
    }
</script>

<style>
    .container { width: 100%; height: 300px; padding: 20px; }
    .light { background: #f3f3f3; color: #333; }
    .dark { background: #333; color: #f3f3f3; }
</style>
<div class="container light">這是一大段測試文本</div>
<script>
    var div = document.querySelector('.container');
    div.onclick = function () {
        // 一行切換夜間/日間模式（toggle 自動判斷）
        this.classList.toggle("dark");
        this.classList.toggle("light");
    }
</script>

// 創(chuàng)建元素節(jié)點(diǎn)（核心）
var newElem = document.createElement('標(biāo)簽名');
// 可選：設(shè)置節(jié)點(diǎn)屬性/內(nèi)容
newElem.id = "newId";
newElem.className = "newClass";
newElem.innerHTML = "新節(jié)點(diǎn)內(nèi)容";

<div class="container"></div>
<script>
    // 1. 創(chuàng)建節(jié)點(diǎn)
    var newDiv = document.createElement('div');
    newDiv.innerHTML = "我是新節(jié)點(diǎn)";
    // 2. 插入到 container 末尾
    var container = document.querySelector('.container');
    container.appendChild(newDiv);
</script>

<div class="container">
    <div>11</div>
    <div>22</div>
</div>
<script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = "插入到22之前";
    var container = document.querySelector('.container');
    // 插入到第二個子節(jié)點(diǎn)（22）之前
    container.insertBefore(newDiv, container.children[1]);
</script>

// 父節(jié)點(diǎn)刪除子節(jié)點(diǎn)，返回被刪除的節(jié)點(diǎn)
var deletedNode = 父節(jié)點(diǎn).removeChild(待刪除節(jié)點(diǎn));

待刪除節(jié)點(diǎn).remove();

<div class="container">
    <div id="delMe">要刪除的節(jié)點(diǎn)</div>
    <div>保留的節(jié)點(diǎn)</div>
</div>
<script>
    var delElem = document.querySelector('#delMe');
    // 方式1：通過父節(jié)點(diǎn)刪除
    delElem.parentElement.removeChild(delElem);
    // 方式2：自行刪除（推薦）
    // delElem.remove();
</script>