HTML DOM 教程

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量1.1k 收藏 29
点赞数 12
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82471222/article/details/139818901
版权

HTML DOM 方法

方法描述
getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

getElementById() 返回带有指定 ID 的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById()	返回带有指定 ID 的元素。</title>
</head>
<body>
    <div id="myDiv">这是一个id=“myDiv”的div元素。</div>
    <script>
        var div = document.getElementById("myDiv");//获取id为“myDiv”的元素
        alert(div.innerHTML);//用弹窗输出div元素的innerHTML属性值
    </script>
    
    
</body>
</html>

getElementsByTagName()    返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。</title>
</head>
<body>
    <div>
        <p>这是第一段</p>
        <p>这是第二段</p>
        <p>这是第三段</p>
    </div>
    <div>
        <h1>这是第一个标题</h1>
        <h2>这是第二个标题</h2>
        <h3>这是第三个标题</h3>
    </div>
    <script>
        // 获取div元素
        var divs = document.getElementsByTagName("div");
        // 获取p元素
        var ps = document.getElementsByTagName("p");
        // 获取h1元素
        var h1s = document.getElementsByTagName("h1");
        // 获取h2元素
        var h2s = document.getElementsByTagName("h2");
        // 获取h3元素
        var h3s = document.getElementsByTagName("h3");
        // 在控制台中输出div元素
        console.log(divs);
        // 在控制台中输出p元素
        console.log(ps);
        // 在控制台中输出h1元素
        console.log(h1s);
        // 在控制台中输出h2元素
        console.log(h2s);
        // 在控制台中输出h3元素
        console.log(h3s);
    </script>
    
    
</body>
</html>

getElementsByClassName()    返回包含带有指定类名的所有元素的节点列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。</title>
</head>
<body>
    <div class="box">
        <p class="p1">这是第一段clsss="p1"的文字.</p>
        <p class="p2">这是第二段class="p2"的文字.</p>
        <p class="p1">这是第三段class="p1"的文字.</p>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0];//获取div元素 
        var p1 = div.getElementsByClassName("p1");//获取class="p1"的元素列表 
        var p2 = div.getElementsByClassName("p2");//获取class="p2"的元素列表 
        console.log(p1);//在控制台输出p1元素列表 
        console.log(p2);//在控制台输出p2元素列表 
    </script>
</body>
</html>

appendChild()    把新的子节点添加到指定节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>appendChild()	把新的子节点添加到指定节点。</title>
</head>
<body>

<div id="parent">
    <p>这是第一段文字。</p>
    <p>这是第二段文字</p>
</div>

<script>
    var parent = document.getElementById("parent");//获取父节点
    var newP = document.createElement("p");//创建新的p节点
    newP.innerHTML = "这是新添加的段落。";//设置新节点的innerHTML属性
    parent.appendChild(newP);//把新节点添加到父节点中
</script>
</body>
</html>

removeChild()    删除子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeChild()	删除子节点。</title>
</head>
<body>
    <div id="parent">
        <p>这是第一个段落。</p>
        <p>这是第二个段落。</p>
        <p>这是第三个段落。</p>
    </div>
    <button onclick="remove()">移除“第2个"段落</button>
    <script>
        function remove() {
            var parent = document.getElementById("parent");//获取父节点
            var child = parent.childNodes[1];//获取第2个子节点
            parent.removeChild(child);//删除第2个子节点
        }
    </script>
</body>
</html>

replaceChild()    替换子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>replaceChild()	替换子节点。</title>
</head>
<body>

<div id="parent">
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
</div>

<script>
    var newP = document.createElement("p");//创建新的p标签
    newP.innerHTML = "这是新的段落。";//设置新的p标签的innerHTML

    var parent = document.getElementById("parent");//获取父元素
    var oldP = parent.firstChild;//获取第一个子元素

    parent.replaceChild(newP, oldP);//替换第一个子元素
</script>

</body>
</html>

insertBefore()    在指定的子节点前面插入新的子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>insertBefore()在指定的子节点前面插入新的子节点。</title>
</head>
<body>
    <div id="container">
        <p>第一个段落</p>
        <p>第二个段落</p>
        <p>第三个段落</p>
    </div>
    <script>
        var container = document.getElementById("container");
        var newP = document.createElement("p");
        newP.innerHTML = "新插入的段落";
        container.insertBefore(newP, container.childNodes[1]);
    </script>

</body>
</html>

createAttribute()    创建属性节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createAttribute()方法创建属性节点。</title>
</head>
<body>

<div id="myDiv">
    <p>这是一个段落。</p>
</div>

<script>
    var div = document.getElementById("myDiv");//获取div元素
    var newAttr = document.createAttribute("myAttribute");//创建属性节点
    newAttr.value = "myValue";//设置属性值
    div.setAttributeNode(newAttr);//添加属性节点到div元素
</script>

</body>
</html>

createElement()    创建元素节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement()	创建元素节点。</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var container = document.getElementById("container");//获取容器元素 
        var newDiv = document.createElement("div");//创建新元素 
        newDiv.innerHTML = "Hello World!";//设置新元素的innerHTML属性 
        container.appendChild(newDiv);//将新元素添加到容器中 
    </script>

</body>
</html>

createTextNode()    创建文本节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createTextNode()	创建文本节点。</title>
</head>
<body>
    <div id="container">
        <p id="para1">这是第一段文字。</p>
        <p id="para2">这是第二段文字</p>
    </div>
    <script>
        var para1 = document.getElementById("para1");//获取元素
        var para2 = document.getElementById("para2");//获取元素
        var newText = document.createTextNode("这个是一个新的文本节点.");//创建文本节点
        para1.appendChild(newText);//将新节点添加到para1元素的最后一个子节点之前
        para2.insertBefore(newText, para2.firstChild);//将新节点添加到para2元素的第一个子节点之前
    </script>

</body>
</html>

getAttribute()    返回指定的属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getAttribute()	返回指定的属性值。</title>
</head>
<body>
    <div id="myDiv" class="myClass">这是一个div元素</div>
    <script>
        var div = document.getElementById("myDiv");// 获取div元素
        var className = div.getAttribute("class");// 获取class属性值
        var id = div.getAttribute("id");// 获取id属性值
        console.log(className); // Output: "myClass"
        console.log(id); // Output: "myDiv"
    </script>
</body>
</html>

setAttribute()    把指定属性设置或修改为指定的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setAttribute()	把指定属性设置或修改为指定的值。</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <button onclick="changeColor()">改变颜色</button>
    <script>
        function changeColor() {
            document.getElementById("myDiv").setAttribute("style", "color:red; background-color:yellow;");//设置或修改属性值
        }
    </script>
</body>
</html>

HTML DOM 属性

innerHTML 属性

获取 id="intro" 的 <p> 元素的 innerHTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取 id="intro" 的 <p> 元素的 innerHTML：</title>
</head>
<body>
    <div id="intro">
        <p>欢迎来到我的博客！</p>
        <p>这里是一些关于我的信息。</p>
    </div>
    <script>
        var intro = document.getElementById("intro");//获取 id="intro" 的元素
        var p = intro.getElementsByTagName("p")[0];//获取 id="intro" 的第一个 <p> 元素
        var pHtml = p.innerHTML;//获取 <p> 元素的 innerHTML
        alert(pHtml);//弹出对话框显示 <p> 元素的 innerHTML
    </script>
</body>
</html>

nodeValue 属性

取回 <p id="intro"> 标签的文本节点值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取回 <p id="intro"> 标签的文本节点值：</title>
</head>
<body>
    <p id="intro">欢迎来到<span>我的博客</span>！</p>
    <script>
        var intro = document.getElementById("intro");//获取p标签的id属性值
        var text = intro.textContent;//获取p标签的文本节点值
        alert(text);//弹出文本节点值
    </script>
</body>
</html>

nodeType 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nodeType 属性</title>
</head>
<body>
    <div id="myDiv">
        这是一个 div 元素
        <p id="myParagraph">这是一个段落元素</p>
        <span id="mySpan">这是一个 span 元素</span>
    </div>
    <script>
        // 获取 div 元素
        var myDiv = document.getElementById('myDiv');
        console.log('myDiv 的 nodeType:', myDiv.nodeType); // 输出: 1 (元素节点)

        // 获取段落元素
        var myParagraph = document.getElementById('myParagraph');
        console.log('myParagraph 的 nodeType:', myParagraph.nodeType); // 输出: 1 (元素节点)

        // 获取 span 元素
        var mySpan = document.getElementById('mySpan');
        console.log('mySpan 的 nodeType:', mySpan.nodeType); // 输出: 1 (元素节点)

        // 获取 div 内的文本节点（可能需要遍历子节点）
        var textNode = null;
        for (var i = 0; i < myDiv.childNodes.length; i++) {
            if (myDiv.childNodes[i].nodeType === 3) { // 文本节点的 nodeType 是 3
                textNode = myDiv.childNodes[i];
                break;
            }
        }

        if (textNode) {
            console.log('textNode 的 nodeType:', textNode.nodeType); // 输出: 3 (文本节点)
        } else {
            console.log('没有找到文本节点');
        }
    </script>
</body>
</html>

HTML DOM 访问

getElementById() 方法

node.getElementById("id");返回带有指定 ID 的元素引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById() 方法</title>
</head>
<body>
    <p id="myP">这是一段文字</p>
    <button onclick="changeColor()">改变颜色</button>
    <script>
        function changeColor() {
            var p = document.getElementById("myP");//获取元素对象
            p.style.color = "blue";//设置元素的颜色 blue
        }
    </script>
</body>
</html>

getElementsByTagName() 方法

node.getElementsByTagName("tagname");返回带有指定标签名的所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回包含文档中所有 <p> 元素的列表：</title>
</head>
<body>
    <p>这是第一段p元素文字。</p>
    <p>这是第二段p元素文字。</p>
    <p>这是第三段p元素文字。</p>
    <h1>返回包含文档中所有p元素的列表：</h1>

    <script>
        var paragraphs = document.getElementsByTagName("p");//获取所有p元素
        var list = "";//定义一个空字符串，用于存储p元素的列表
        for (var i = 0; i < paragraphs.length; i++) {
            list += "<li>" + paragraphs[i].innerHTML + "</li>";//遍历所有p元素，将其内容添加到列表中
        }
        document.write("<ul>" + list + "</ul>");//将列表添加到页面中
    </script>
</body>
</html>

HTML DOM - 修改

HTML DOM 创建 HTML 内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM 创建 HTML 内容</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var container = document.getElementById("container");//获取容器元素
        var newDiv = document.createElement("div");//创建新div元素
        newDiv.innerHTML = "这是新添加的内容";//设置新div元素的innerHTML属性
        container.appendChild(newDiv);//将新div元素添加到容器元素中
    </script>
</body>
</html>

HTML DOM 改变 HTML 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM 改变 HTML 样式</title>
</head>
<body>
    <h1 id="myH1">欢迎来到我的博客</h1>
    <button onclick="changeStyle()">改变颜色和字体大小</button>
    <script>
        function changeStyle() {
            var h1 = document.getElementById("myH1");//获取h1元素
            h1.style.color = "red";//设置颜色为红色
            h1.style.fontSize = "50px";//设置字体大小为30px
        }
    </script>
</body>
</html>

HTML DOM 创建新的 HTML 元素
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM 创建新的 HTML 元素</title>
</head>
<body>
    <div>
        <p>这是第一个段落。</p>
        <p>这是第二个段落。</p>
    </div>
    <script>
        // 创建新的 HTML 元素
        var newP = document.createElement("p");// 创建一个 <p> 元素
        newP.innerHTML = "这是新创建的P元素的内容";// 设置内容
        document.body.appendChild(newP);// 将新元素添加到 body 中
    </script>
</body>
</html>

HTML DOM - 元素

创建新的 HTML 元素 - createElement() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建新的 HTML 元素 - createElement() 方法</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var container = document.getElementById("container");//获取容器元素
        var newElement = document.createElement("p");//创建新的 p 元素
        newElement.innerHTML = "This is a new paragraph.";//设置新元素的innerHTML属性
        container.appendChild(newElement);//将新元素添加到容器中
    </script>
</body>
</html>

创建新的 HTML 元素 - insertBefore() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建新的 HTML 元素 - insertBefore() 方法</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var container = document.getElementById("container");//获取容器元素
        var newDiv = document.createElement("div");//创建新的 div 元素
        newDiv.innerHTML = "这是新创建的 div 元素";//设置 div 元素的innerHTML属性
        container.insertBefore(newDiv, container.firstChild);//在容器元素的最前面插入新的 div 元素
    </script>
</body>
</html>

删除已有的 HTML 元素-removeChild()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除已有的 HTML 元素-removeChild()</title>
</head>
<body>
    <div id="container">
        <h1>欢迎来到我的博客</h1>
        <p>这是第一个段落.</p>
        <p>这是第二个段落.</p>
    </div>
    <script> 
       
        var container = document.getElementById("container");//获取容器元素container
        
        
        container.removeChild(container.children[1]);//删除containe下的第二个子元素，即第二个段落
        
        //container.innerHTML = "";//清空container元素的内容
    </script>
</body>
</html>

替换 HTML 元素- replaceChild() 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换 HTML 元素- replaceChild() </title>
</head>
<body>
    <div id="container">
        <p>这是第一个子元素</p>
        <p> 这是第二个子元素 </p>
    </div>
    <script>
        var container = document.getElementById("container");//获取容器元素
        var newElement = document.createElement("h1");//创建新元素
        newElement.innerHTML = "这是替换后的新元素";//设置新元素的innerHTML属性
        container.replaceChild(newElement, container.childNodes[1]);//用新元素替换第二个子元素
    </script>
</body>
</html>

HTML DOM - 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

HTML DOM -当用户点击鼠标时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM -当用户点击鼠标时</title>
</head>
<body>
    <div id="myDiv">
        <p>欢迎访问我的网站！</p>
        <p>点击我试试！</p>
        <p>点击我试试！</p>
    </div>

    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.addEventListener("click", function() {
            alert("你点击了我的div！");
        });
    </script>
</body>
</html>

HTML DOM -当网页已加载时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM -当网页已加载时</title>
</head>
<body>
    <div id="myDiv">
        <p>这是一个段落。</p>

    </div>
    <script>
        // 页面已加载时执行的 JavaScript 代码
        document.getElementById("myDiv").innerHTML = "这是一个新的段落。";

        

        // 或者使用addEventListener()方法添加事件监听器
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("myDiv").innerHTML = "这是一个新的段落。";
        });
    </script>
</body>
</html>

HTML DOM -当图片已加载时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM -当图片已加载时</title>
</head>
<body>
    <img id="myImg" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Mountains" width="500" height="300">
    <script>
        var img = document.getElementById("myImg");//获取图片元素
        img.addEventListener("load", function() {
            alert("图片加载完成");//当图片加载完成时，弹出提示框
        });
    </script>
</body>
</html>

HTML DOM -当鼠标移动到元素上时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM -当鼠标移动到元素上时</title>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: red;">    
        <p>这是
            <span id="mySpan">一个span元素</span>
            
        </p>
    </div>

    <script>
        var myDiv = document.getElementById("myDiv");//获取div元素
        var mySpan = document.getElementById("mySpan");//获取span元素

        myDiv.addEventListener("mouseover", function(event) {
            mySpan.innerHTML = "鼠标移入div元素!";//鼠标移入div元素时，将span元素的innerHTML设置为"Mouse over!"
        });

        myDiv.addEventListener("mouseout", function(event) {
            mySpan.innerHTML = "鼠标移出div元素!";//鼠标移出div元素时，将span元素的innerHTML设置为"a span"
        });
    </script>
</body>
</html>

HTML DOM -当输入字段被改变时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM -当输入字段被改变时</title>
</head>
<body>
    <form>
        <label for="input">输入框：</label>
        <input type="text" id="input" onchange="changeInput()">

    </form>

    <p id="result"></p>

    <script>
        function changeInput() {
            var input = document.getElementById("input");
            var result = document.getElementById("result");
            result.innerHTML = "你输入的内容是：" + input.value;
        }
    </script>
    
</body>
</html>

HTML DOM -当 HTML 表单被提交时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM -当 HTML 表单被提交时</title>
</head>
<body>
    <form id="myForm" action="submit.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea><br><br>
        <input type="submit" value="Submit">
    </form>
    <script>
        var form = document.getElementById("myForm");// 获取表单
        form.addEventListener("submit", function(event) {
            event.preventDefault(); // 阻止默认提交行为
            var name = document.getElementById("name").value;// 获取表单数据
            var email = document.getElementById("email").value;// 获取表单数据
            var message = document.getElementById("message").value;// 获取表单数据
            // 发送数据到服务器
            var xhr = new XMLHttpRequest();// 创建 XMLHttpRequest 对象
            xhr.open("POST", "submit.php", true);// 设置请求方式和 URL
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// 设置请求头
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {//readyState 属性表示请求/响应过程的当前状态:4表示响应完成,status属性表示响应的HTTP状态码:200表示成功
                    alert("提交成功!");// 提示提交成功
                }
            }
            xhr.send("name=" + name + "&email=" + email + "&message=" + message);// 发送数据
        });
    </script>
</body>
</html>

HTML DOM -当用户触发按键时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM -当用户触发按键时</title>
</head>
<body>
    <input type="text" id="input1">
    +
    <input type="text" id="input2">
    <button onclick="add()">等于</button>
    <script>
        function add() {
            var input1 = document.getElementById("input1").value;//获取输入框的值
            var input2 = document.getElementById("input2").value;//获取输入框的值
            var result = parseInt(input1) + parseInt(input2);//将输入框的值转换为数字并相加
            document.getElementById("input1").value = "";//清空输入框的值
            document.getElementById("input2").value = "";//清空输入框的值
            document.getElementById("input1").focus();//将焦点移到第一个输入框
            alert("相加结果是: " + result);//弹出提示框显示结果
        }
        document.getElementById("input1").addEventListener("keydown", function(event) {
            if (event.keyCode == 13) {
                add();
            }
        });
    </script>
</body>
</html>

程序员-张师傅
关注
  • 12
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML DOM教程
07-29
提供对w3school提供的html dom讲解完整打包，制作成chm格式，欢迎下载。感谢w3school。
HTMLDOM教程
Tyloo_wdnmd的博客
02-13 462
HTMLDOM 1.什么是HTMLDOM? HTMLDOM提供处理HTML文档的API。 2.W3CDOM与HTMLDOM的区别 W3CDOM可以处理HTML/XML文档; HTMLDOM仅能处理HTML文档。 3.获取对象 HTMLElement document.getElementById(string id) 4.访问HTML对象的属性 object.属性名称 = 值 [var 变量名称 ...
初学JavaScript：HTML DOM
lalala_dxf的博客
04-16 1117
DOM 简介 DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）（可以理解为对一个网页节点进行增删操作，一个节点可以是一对html标签，也可以是一对span标签）。 拆分理解下： • 文档 – 文档表示的就是整个的HTML网页文档，也就做结构树 • 对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 • 模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象 文档对象
java html dom_htmlDOM操作1
weixin_35510630的博客
02-15 516
DOM 是 Document Object Model(文档对象模型)的缩写。HTML 的标准对象模型HTML 的标准编程接口HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTMLDOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。通过HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改，也可以...
html dom 教程
读书笔记
09-18 1051
html dom教程■  html dom定义了访问html的标准方法。■  Html dom把html文档呈现为带有元素、属性和文本的树结构（节点树）。■  根据dom，html文档中的每个部分都是一个节点。Dom这样规定：      ▼ 整个文件是一个文档节点      ▼ 每个html标签是一个元素节点      ▼ 包含在html元素中的文本是文本节点   
HTML-DOM树篇
muzili_henji的博客
07-28 4328
一、什么是DOM DOM（Document Object Model） 文档对象模型，是HTML和XML文档的编程接口 DOM 以树结构表达 HTML 文档，树的每个分支的终点都是一个节点，每个节点都包含着对象 DOM 将web页面与脚本或编程语言链接起来，可以通过DOM提供的方法改变节点的结构、样式或者内容。 二、为什么要介绍DOM树？ DOM树是浏览器标记内部的表示，浏览器接收到网络数据后的第一步就是 处理HTML标记并构建DOM树。 三、DOM树的构建 DOM树是一种有限层次的..
html dom树结构,【EASYDOM系列教程】之DOM 树结构
weixin_34644072的博客
06-15 1008
DOM 树结构DOM 之所以可以访问和更新 HTML 页面中的内容、结构和样式，是因为 DOM 将 HTML 页面解析为一个 树结构。例如下面这段代码是一个简单的 HTML 页面源代码:示例页面这是一个示例页面这是一个段落内容.将上面的 HTML 页面绘制成 DOM 树结构，如下效果:通过上面的 DOM 树结构，我们可以看到，Document 对象是作为 DOM 树结构的入口。再根据 DOM 树结...
php解析html类库simple_html_dom详细使用教程说明
陈万洲的专栏
09-18 1503
下载地址：https://github.com/samacs/simple_html_dom 官网下载：http://sourceforge.net/projects/simplehtmldom/files/latest/download?source=top3_dlp_t5 一直以来使用php解析html文档树都是一个难题。Simple HTML DOM parser帮我们很好地解决...
HTML DOM
u013795673的博客
06-07 713
DOM 节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM Tree 实例 DOM 处理中的常见错误是希望元素节点包含文本。 在本例中：DOM 教程，元素节点 ，包含值为 "DOM 教程" 的文本节点。 可通过节点的 innerHTML 属性来访问文本节点的值
由浅入深认真学习掌握 HTML DOM 教程
05-27
由浅入深认真学习掌握 HTML DOM 教程，教你如何使用html
Day43
最新发布
m0_67496588的博客
06-20 702
JSON，Ajax
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 372
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 388
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 169
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 261
【element 】修改下拉菜单
vue格网图
南北粉面馆
06-16 329
【代码】vue格网图。
什么是try-catch?
qq_60504665的博客
06-18 405
try-catch是编程中用于处理异常（errors 或 exceptions）的一种结构，特别是在许多编程语言中，如 JavaScript、Java、C#、Python（尽管 Python 的语法略有不同）等。它的主要目的是在代码执行过程中捕获并处理运行时错误，从而防止程序因未处理的异常而意外终止。以下是try-catch。
html dom常用方法大全
07-17
以下是HTML DOM中常用的一些方法： 1.ById(id)：通过元素的id属性获取元素。 2. getElementsByTagName(tagName)：通过元素的标签名获取元素集合。 3. getElementsByClassName(className)：通过元素的类名获取元素集合。 4. querySelector(selector)：通过CSS选择器获取匹配的第一个元素。 5. querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素。 6. createElement(tagName)：创建一个新的元素节点。 7. createTextNode(text)：创建一个包含指定文本内容的文本节点。 8. appendChild(node)：将一个节点添加为另一个节点的子节点。 9. removeChild(node)：从父节点中移除指定的子节点。 10. replaceChild(newNode, oldNode)：用一个新节点替换父节点中的指定子节点。 11. cloneNode(deep)：克隆一个节点。 12. parentNode：获取当前节点的父节点。 13. childNodes：获取当前节点的所有子节点集合。 14. firstChild：获取当前节点的第一个子节点。 15. lastChild：获取当前节点的最后一个子节点。 16. nextSibling：获取当前节点的下一个兄弟节点。 17. previousSibling：获取当前节点的上一个兄弟节点。 18. innerHTML：获取或设置当前元素的HTML内容。 19. value：获取或设置表单元素的值。 20. style：获取或设置元素的样式属性。 这只是一小部分常用方法，HTML DOM还有很多其他方法和属性可供使用。可以根据具体需求查阅相关文档或参考教程来了解更多方法和属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员-张师傅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值