DOM的操作

最新推荐文章于 2022-07-06 09:30:21 发布

端脑

最新推荐文章于 2022-07-06 09:30:21 发布

阅读量199

点赞数

分类专栏：前端文章标签： DOM的操作

本文链接：https://blog.csdn.net/qq_43776742/article/details/103518125

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

访问 / 更新文本节点

nodeValue

这个属性节点允许访问或修改文本节点的内容。
使用nodeValue属性时，必须在文本节点上操作，而不再包含的文本元素节点上操作。

操作HTML内容

innerHTML
- 使用innerHTML属性可以得到这个元素的内容，他以一个很长的字符串的形式返回，其中有该元素所包含的标签。
textContent
- 仅访问文本内容
DOM操作

访问或更新属性值

className / id
- 有一些的对象属性和方法可以用来操作HTML属性。可以用此来获取或更新其class或id属性
hasAttribute ---- 检查属性
getAttribute ---- 获取属性
setAttribute ---- 更新属性
removeAttrbute ---- 移除属性

nodeValue

<div id="page">
        <h1 id="header">List</h1>
        <h2>Buy groceries</h2>
        <ul>
            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li>
            <li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
        </ul>
    </div
_____________________________________________________
var itemTwo = document.getElementById('two');  // 获取第二列的列表项

var elText  = itemTwo.firstChild.nodeValue;    // 得到文本内容

elText = elText.replace('pine nuts', 'kale');  // 替换文本内容

itemTwo.firstChild.nodeValue = elText;         // 使用nodeValue属性，将文本节点的内容更新为新的 值

返回上层目录

innerHTML

<div id="one"></div>
——————————————————————————————————————————————————————————————————
    <script>
        var item = document.getElementById("one");
        var str = "将innerHTML插入到页面之中";
        item.innerHTML = str;
    </script>

<div id="one"></div>
    <script>
        var item = document.getElementById("one");
        var str = "innerHTML可以插入标签";
        item.innerHTML = '<a href=\"http://example.org\">' + str + '</a>';
    </script>

返回上层目录

textContent

<div id="one"></div>
——————————————————————————————————————————————————————————
    <script>
        var item = document.getElementById("one");
        var str = "将textContent插入到页面之中";
        item.textContent = str;
    </script>

<div id="one"></div>
    <script>
        var item = document.getElementById("one");
        var str = "textContent不能插入标签";
        item.textContent = '<a href=\"http://example.org\">' + str + '</a>';
    </script>

返回上层目录

DOM操作 ---- 添加，删除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul id="todo">
        <li id="one">fresh figs</li>
        <li id="two">pine nuts</li>
        <li id="three">honey</li>
        <li id="four">balsamic vinegar</li>
    </ul>

    <script>
    //添加操作
        var newEl = document.createElement('li');           //创建一个新的元素节点
        var newText = document.createTextNode('quinoa');    //创建一个新的文本节点
        newEl.appendChild(newText);                         //将文本节点中的内容加入到元素节点中
        var position = document.getElementsByTagName('ul')[0];  
        position.appendChild(newEl);                        //将元素节点添加到对应的DOM树中


	//删除操作
		var removeEl = document.getElementsByTagName('li')[3];          //第一步 ：将需要删除的元素保存到一个变量中
        var containerEl = document.getElementsByTagName('ul')[0];       //第二步 : 把该元素的父元素保存到变量中
        containerEl.removeChild(removeEl);                              //第三步 ：把元素从它的包含元素中移除
    </script>
</body>

</html>

返回上层目录

访问或更新属性值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul id="todo">
        <li id="one" class="hot">fresh figs</li>
        <li id="two" class="hot">pine nuts</li>
        <li id="three" class="cool">honey</li>
        <li id="four">balsamic vinegar</li>
    </ul>
    <div id="scriptResults"></div>
    <script>
        var firstItem = document.getElementById('one'); //得到id为“one”的节点

        //hasAttribute检查元素节点是否包含特定的属性
        var str = firstItem.hasAttribute('class'); //检测其是否包含class属性
        alert(str);


        //getAttribute得到属性值
        var attr = firstItem.getAttribute('class'); //得到其属性值
        var el = document.getElementById('scriptResults');
        el.innerHTML = '<p>The first item has a class name: ' + attr + '</p>'; //得到其className


        //更改其属性值
        //className只能更改class的值。id只能更改id属性的值
        firstItem.className = 'complete'; //将class值直接变为complete
        var attr1 = firstItem.getAttribute('class');
        el.innerHTML = '<p>The first item has a class name: ' + attr1 + '</p>';
        //setAttribute能更新任何HTML属性的值——————它使用两个参数，（属性名称，该属性值）
        var fourthItem = document.getElementsByTagName('li').item(3);
        fourthItem.setAttribute('class', 'cool');


        //removeAttribute删除其属性
        var firstItem = document.getElementById('one');
        if (firstItem.hasAttribute('class')) {
            firstItem.removeAttribute('class');
        }
    </script>
</body>

</html>