DOM JavaScript 与网页交互_javascript dom 获取网页元素交互-优快云博客

DOM

getElementById():

通过 ID 获取页面中的元素。

<body>
    <div id="app">规范风格变化</div>
</body>
<script>
    // 获取元素
    const profile = document.getElementById("app");
    // 修改内容
    profile.textContent = '积极解决';
    //控制台打印
    console.log(document.getElementById("app"));
    console.dir(document.getElementById("app"));
</script>

getElementsByClassName()

通过指定的类名, 获取页面中所有具有该类名的元素, 并返回一个类数组对象

对象类似于数组，但不是真正的数组，它包含了所有匹配的元素。

返回的类数组对象是实时的，这意味着如果 DOM 发生变化，返回的集合也会相应更新。

包含了所有具有 className 类名的元素

<body>
    <div class="box">box 1</div>
    <div class="box">box 2</div>
    <div class="box"></div>
</body> 
<script>
    var boxes = document.getElementsByClassName('box');
    for (var i = 0; i < boxes.length; i++) {
        console.log(boxes[i].innerHTML); // 输出每个元素的内部HTML
    }
</script>

getElementsByTagName()

通过标签名获取页面中的元素集合

根据指定的标签名获取页面中所有匹配的元素，并返回一个类数组对象（HTMLCollection）

可以通过循环来遍历这些元素

<body>
    <div id="app"></div>
    <div class="box">box 1</div>
    <div class="box"></div>
    <div class="box"></div>
</body>
<script>
    let divS = document.getElementsByTagName("div");
    divS[0].style.color = "blue";  // 改变第一个 div 元素的文字颜色
</script>

document.querySelector()

通过 CSS 选择器获取页面中的第一个匹配元素

<script>
    let header = document.querySelector(".header");
    header.style.fontSize = "24px";  // 修改第一个 .header 元素的字体大小
</script>

document.querySelectorAll()

通过 CSS 选择器获取页面中的所有匹配元素，返回一个 NodeList。

.class #id tag 直接输入即可

<script>
    let paragraphs = document.querySelectorAll("p");
    paragraphs.forEach(p => p.style.color = "green");  // 将所有段落文本变为绿色
</script>

createElement()

它用于创建一个新的 HTML 元素（如 div、p、span 等）。

<script>
    // 创建一个新的 <div> 元素
    const div = document.createElement('div');
    div.textContent = '这是一个新的 div 元素';

    // 将其添加到现有的 body 元素中
    // appendChild加入子元素
    document.body.appendChild(div);
</script>

createTextNode

需要添加文本内容，而不是一个完整的元素，可以使用 document.createTextNode() 来创建一个文本节点。

<script>
    // 创建一个文本节点
    const text = document.createTextNode('这是一些文本');

    // 将文本节点添加到一个现有的元素中
    const div = document.createElement('div');
    
    div.appendChild(text);
    // 将div加到body中
    document.body.appendChild(div);
</script>

innerHTML 只操作元素内部

动态获取或设置元素内部的 HTML 内容。

<script>
    // 通过 innerHTML 创建一个带有多个元素的 HTML 结构
    const div = document.createElement('div');
    div.innerHTML = '<p>这是一个段落</p><span>这是一个 span 元素</span>';
    document.body.appendChild(div);
</script>

outerHTML 操作元素本身及其内容

获取或设置元素本身及其内容的 HTML

// 获取元素及其内容
const elem = document.getElementById('box');
console.log(elem.outerHTML); // 输出整个元素的HTML，包括自身标签

// 替换整个元素
elem.outerHTML = '<div id="new-box">新内容</div>';