JavaScript【操作DOM对象】

最新推荐文章于 2022-06-08 14:41:55 发布

超级码猴k

最新推荐文章于 2022-06-08 14:41:55 发布

阅读量183

点赞数

分类专栏： Java 文章标签： javascript

本文链接：https://blog.csdn.net/qq_48108092/article/details/123596513

版权

Java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了如何操作DOM对象，包括获取DOM节点、更新节点内容、修改样式、删除和插入节点。核心内容包括使用原生JavaScript进行DOM操作，如getElementById、getElementsByClassName等，并演示了如何添加、删除和插入节点，以及如何改变节点的文本和CSS样式。

摘要由CSDN通过智能技术生成

操作DOM对象（重点）

核心

浏览器网页就是一个Dom树形结构

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得Dom节点

<script>
        //对应CSS选择器
        var h1=document.getElementsByClassName('h1');
        var h1=document.getElementById('p1');
        var h1=document.getElementsByName('p1');
        var father =document.getElementById('father');
        var children=father.children;//获取父节点下的所有子节点
        

    </script>

这是原生代码，之后我们尽量都使用jQuery()

更新节点

<div id="id1">
</div>
<script>
var id1 = document.getElementById( 'id1 ');
</script>

操作文本

id1.innerText='456' 修改文本的值
id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作JS-操作CSS

id1.style.color = 'ye11ow ';//属性使用字符串包裹
id1.style.fontsize='20px ';//_转驼峰命名
id1.style.padding = '2em'

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementBy1d( 'p1');
var father = p1.parentElement;
father.removechi1d(self)
//删除是一个动态的过程;
father.removechi1d(father.children[0])
father.removechild(father.children[1])
father.removechi1d(father.children[2])
</script>

注意：删除多个节点的适合，children是时刻在变化的，删除节点的时候一定要注意

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干，免得会被覆盖

追加

<p id="js ">Javascript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me ">JavaME</p></div>
<script>
var js = document.getElementById( 'js');
var list = document.getElementById('list');
</ script>

然后再F12控制台上输入

list.appendChild(js)

创建一个新的标签，实现插入

<p id="js ">Javascript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me ">JavaME</p></div>
<script>
var js = document.getElementById( 'js');
var list = document.getElementById('list');

//通过JS创建一个新的节点
var newP = document.createElement('p');//创建一个P标签
newP.id='newP';
newP.innerText='Hello'

//控制台输入->list.appendChild(newP)

</ script>

<body>
<p id="js">javascript</p>
<div id="list">
    <p id="ee">javaee</p>
    <p id="se">javase</p>
    <p id="me">javame</p>
</div>
<script>

    //可以创建一个Style标签
    var myStyle=document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerText='body{background-color:chartreuse;}'//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);


</script>


</body>

insertBefore

<body>
<p id="js">javascript</p>
<div id="list">
    <p id="ee">javaee</p>
    <p id="se">javase</p>
    <p id="me">javame</p>
</div>
<script>
    var se=document.getElementById('se');
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    //要包含的节点.insertBefore(newNode,targetNode)
    list.insertBefore(js,se);
</script>


</body>

摘录自遇见狂神说，仅供自己学习使用