JavaScript-DOM操作

最新推荐文章于 2024-07-25 14:02:05 发布

Acndy233

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量62

点赞数

分类专栏： HTML+CSS+JSP 文章标签： javascript js dom java

本文链接：https://blog.csdn.net/zhangsann_6/article/details/119818403

版权

HTML+CSS+JSP 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript–DOM 增删改查

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

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

1 更新

将id为pp的标签内容更改为456

<p id="pp">c</p>
<div id="div1">
    <p id="p1">java</p>
    <p id="p2">python</p>
    <p id="p3">c++</p>
</div>

<script>
    let
        elementById1 = document.getElementById("pp"),
        elementById2 = document.getElementById("div1");
    elementById2.appendChild(elementById1);

    elementById1.innerText = '456';
</script>

2 查询

通过ID、TagName、ClassName来查询节点

<p id="pp">c</p>
<div id="div1">
    <p id="p1">java</p>
    <p id="p2">python</p>
    <p id="p3">c++</p>
    <p class="ppp"></p>
</div>

<script>
    let
        elementById1 = document.getElementById("pp"),
        elementById2 = document.getElementById("div1");
        elementsByClassName = document.getElementsByClassName('ppp');
        elementsByTagName = document.getElementsByTagName('p');
</script>

3 删除

删除需要找到父节点，然后调用父节点删除该节点

<p id="pp">c</p>
<div id="div1">
    <p id="p1">java</p>
    <p id="p2">python</p>
    <p id="p3">c++</p>
</div>

<script>
    let
        elementById1 = document.getElementById("pp"),
        elementById2 = document.getElementById("div1");
    elementById2.appendChild(elementById1);

    document.getElementById('div1').removeChild(document.getElementById('p3'));
</script>

4 创建和移动

4.1 移动

将id为pp的

标签移动到id为div1的

标签中

4.2 创建新节点

通过：

document.createElement(‘div’) 创建div标签
addElement.id=“div_new” 为div标签创建id
addElement.innerText 为div标签添加文本内容

<body>

<p id="pp">c</p>
<div id="div1">
    <p id="p1">java</p>
    <p id="p2">python</p>
    <p id="p3">c++</p>
</div>

<script>
    let
        elementById1 = document.getElementById("pp"),
        elementById2 = document.getElementById("div1");
	//追加到后面
    elementById2.appendChild(elementById1);

    let addElement = document.createElement('div');
    addElement.id="div_new";
    addElement.innerText="添加一个div标签";

	//追加到后面
    elementById2.appendChild(addElement);

	//创建一个标签节点
	let new_script = document.createElement('script');
    new_script.setAttribute('type', 'text/javaScript');

	//追加到后面
	elementById2.appendChild(new_script);

    //创建一个style标签
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerText='body{background-color: chartreuse;}';

    //追加到head标签里面
    document.getElementsByTagName('head')[0].append(myStyle);

	let p2 = document.getElementById('p2');
    let pp = document.getElementById('pp');
    let div1 = document.getElementById('div1');

    //div1为要包含的节点
    //pp为要插入的节点
    //p2为在该节点之前插入
    div1.insertBefore(pp,p2);

</script>

</body>

以上是JavaScript中DOM，蟹蟹支持~~~

推荐该up主，内容摘自这里狂神说java

Acndy233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM操作

JavaScript–DOM 增删改查浏览器网页就是一个DOM树形结构！更新：更新DOM节点遍历DOM节点：得到DOM节点删除：删除一个DOM节点添加：添加一个DOM节点1 更新将id为pp的标签内容更改为456c<div id="div1"> java python <p id="p
复制链接

扫一扫

专栏目录