JavaScript（第六章）：操作DOM对象

最新推荐文章于 2024-05-21 14:15:14 发布

爱卿呀

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量201

点赞数

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

本文链接：https://blog.csdn.net/weixin_43432438/article/details/124736712

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

获得dom节点

<body>
	//对应css选择器
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

<script>
   var h1=document.getElementsByTagName('h1')
   var p1=document.getElementById('p1')
   var  p2=document.getElementsByClassName('p2')
</script>

</body>

在这里插入图片描述
2.获取父节点下的所有子节点

 <div id="father">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
<script>
    var father=document.getElementById('father');
    var children=father.children;//获取父节点下的所有子节点

</script>

在这里插入图片描述

2.操作dom节点

2.1操作文本
在这里插入图片描述
2.2操作css

3.删除节点

删除节点的步骤:先获取父节点,在通过父节点删除自己

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(self);
    //注意删除是一个动态的过程，删除多个节点时children是时刻变换的删除节点时一定要注意
</script>

4.插入节点

我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经在元素了,我们就不能这么干了!会产生覆盖

4.1插入节点appendChild

 	<p id="1"> 1</p>
	<div id="father">
	    <p id="2">2</p>
	    <p id="3">3</p>
	    <p id="4">4</p>
	</div>
<script>
    var fathers=document.getElementById('father');
    var child=document.getElementById('1');
    fathers.appendChild(child);
</script>

在这里插入图片描述

4.2创建标签并插入

 <p id="1"> 1</p>
<div id="father">
    <p id="2">2</p>
    <p id="3">3</p>
    <p id="4">4</p>
</div>
<script>
    var fathers=document.getElementById('father');
    var child=document.getElementById('1');

    //创建节点
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //创建style标签
    var myStyle=document.createElement('style');//创建一个空的style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color: red;}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

在这里插入图片描述
4.3 insertBefore 插入到某个节点前

<p id="1"> 1</p>
<div id="father">
    <p id="2">2</p>
    <p id="3">3</p>
    <p id="4">4</p>
</div>
<script>
    var fathers=document.getElementById('father');
    var child1=document.getElementById('4');
    var newchild=document.getElementById('1');
    fathers.insertBefore(newchild,child1);