首页 > 编程语言> > JavaScript小汇（8）—— 操作DOM对象

JavaScript小汇（8）—— 操作DOM对象

2021-02-03 09:33:43 作者：互联网

文章目录

- 操作DOM对象重点

操作DOM对象重点

浏览器网页就是一个DOM树

更新:更新DOM节点

遍历:得到DOM节点

删除:删除DOM节点

添加:添加新节点

获得DOM节点

</head>
<body>
    <div id="d1">
        <h1>标题1</h1>
        <p id="p1">p标签</p>
        <p class="p2">p标签</p>
	</div>
	<script type="text/javascript">
        var d1 = document.getElementById('d1');//Id
        var p2 = document.getElementsByClassName('p2');//ClassName
        var h1 = document.getElementsByTagName('h1');//TagName
    </script>
</body>

操作文本

d1.innerText='111';//修改文本的值
>"111"
d1.innerHTML='<p style="color: red">haha</p>';//可以解析html标签
>haha

操作css

d1.style.color='red';
d1.style.border='1px solid black';
d1.style.fontSize='30px';

删除节点

<script type="text/javascript">
    var fa = document.getElementById("d1");
    var c1 = document.getElementsByTagName('h1');
    var c2 = document.getElementById('p1');
    var c3 = document.getElementsByClassName('p2');
    fa.removeChild(c2);//方法一

	fa.removeChild(fa.children[0]);//方法二    注意节点的下标动态更新
</script>

追加节点 append()

已有标签进行追加

<body>
    <p id="r">red</p>
    <div id="d">
        <p id="y">yellow</p>
        <p id="p">purple</p>
    </div>
    <script type="text/javascript">
        var r = document.getElementById('r');
        var d = document.getElementById('d');
        d.appendChild(r);
    </script>
</body>

创建标签进行追加

<script type="text/javascript">
    var newE = document.createElement('p');
    newE.id = 'new';//newE.setAttribute('id','new');
    newE.innerText = 'brown';
    var d = document.getElementById('d');
    d.appendChild(newE);
</script>

insert

<body>
    <div id="d">
        <p id="y">yellow</p>
		<p id="p">purple</p>
	</div>
    <script type="text/javascript">
        var newE = document.createElement('p');
        newE.setAttribute('id','new');
        newE.innerText='grey';
        var pu = document.getElementById('p');
        var d = document.getElementById('d');
        d.insertBefore(newE,pu);//insertBefore(newNode,targetNode)
    </script>
</body>

如有不对的地方欢迎大家指出，共同进步！

标签：DOM,小汇,JavaScript,newE,var,document,节点,d1
来源： https://blog.csdn.net/weixin_45734378/article/details/113539443