JavaScript-DOM对象

最新推荐文章于 2024-09-14 18:52:56 发布

QKain

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量109

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_44491532/article/details/116379898

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript-DOM对象

什么是DOM对象？

DOM，全称“DocumentObjectModel（文档对象模型）”，它是由W3C组织定义的一个标准。

说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。

更新：更新DOM节点

遍历：遍历得到DOM节点

删除：删除一个DOM节点

添加：添加一个DOM节点

就是增删改查，要进行这些操作，就要先获得DOM节点。

获得DOM节点

<script>
    //通过标签名获取document对象
    document.getElementsByTagName('h1')
    //通过id获取document对象
    document.getElementById('p1')
    //通过class获取document对象
    document.getElementsByClassName('class1')
</script>

更新DOM节点

<script>
    //修改文本的值
    document.getElementById('p2').innerText = '111';
    //解析HTML
    document.getElementById('p2').innerHTML = '<strong>111</strong>';
    //document和css样式互动
    document.getElementById('p2').style.color = 'red';
</script>

删除节点

先获取节点的父节点，再通过父节点删除节点

<script>
    //先获取父节点，通过父节点删除节点
    document.getElementById('p1').parentElement.removeChild(document.getElementById('p1'));
</script>

插入节点

<body>
<div id="p2">1111</div>
<div id="father">
    <div id="p1">2222</div>
</div>
</body>
<script>
    //移动一个已有节点
    document.getElementById('p1').append(document.getElementById('p2'));
    //创建节点
    document.getElementById('p1').append(document.createElement('p').innerText = '哈哈');
</script>