原生JS操作DOM对象

最新推荐文章于 2024-10-17 09:40:47 发布

CP3圣保罗

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量177

点赞数

分类专栏： javascript 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_42837890/article/details/104416554

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作DOM对象</title>

</head>
<body>
    <div id = "father">
        <h1>标题1</h1>
        <p id ="p1">我是p1</p>
        <p class ="p2">我是p2</p>
    </div>

<script>
    'use strict';
    //获取dom节点
    var hh1= document.getElementsByTagName("h1");//通过标签名
    var pp1= document.getElementById('p1');//id
    var pp2=document.getElementsByClassName('p2');//类名
    var father1 = document.getElementById('father');//获取父亲节点
    var children = father1.children;//所有孩子节点
    var child1 =father1.firstChild;//第一个孩子
    var child2 =father1.lastChild;//最后一个孩子

    //创建dom节点
    //JavaScript新建一个节点
    var newelmNode = document.createElement('p');//创建元素节点
    var newtextNode = document.createTextNode('text1');
    var newclassNode =document.createAttribute('class');

    //修改dom节点
    newelmNode.id='#newp1';
    newelmNode.innerText='innerText只返回文本值';
    newelmNode.innerHTML='<strong>新节点：Html返回文本值和解析HTML代码</strong>';
    newelmNode.style.fontSize='20px';//驼峰命名替代-
    newelmNode.style.color='green';
    newelmNode.style.padding='2em';

    //2输入属性名，获取元素属性名对应的属性值
    newelmNode.getAttribute('id');
    //3或者用setAttribute来直接设置属性名，值
    newelmNode.setAttribute('class','pclass1');


    //末尾追加
    father1.appendChild(newelmNode);//注意传入参数为之前定义的节点名，不是字符串不要加''
    //====  document.getElementById('father').appendChild(newp);
    //子元素之前插入
    document.getElementById('father').insertBefore(newelmNode,pp1);
    //参数1：新节点名，参数2：父元素中已存在的节点名
    //2种同时插入相同元素只会执行后面的，前面的插入会被覆盖


    //删除dom节点
    /*
    先获取父节点，再通过父节点删除自己
    var son2 = document.getElementsByClassName('p2');//获取儿子
    var father2 = son2.parentElement;//获取父亲节点
    father2.removeChild(son2);
    此方法报错Uncaught TypeError: Cannot read property 'removeChild' of undefined
    */
    father1.removeChild(father1.lastElementChild);//正确
    /*注意删除是一个动态过程，数组下标会随着删除变化
    father2.removeChild(father2.children[0]);
    father2.removeChild(father2.children[1]);
    father2.removeChild(father2.children[2]);
    */

</script>
</body>
</html>