JavaScript-dom的基本操作

深藏阁楼爱情的钟 2022-05-26 20:06 246阅读 0赞

[介绍了dom的选择器][dom]主要是介绍了dom的查。

1：增

元素节点的生成  document.createElement();

var div=document.createElement('div');

这个操作只是生成了一个div对象，但是没有放在body里面。

![70][]![70 1][]但是的确生成了，还么用而已，我们只是需要插入到页面而已。

文本节点的生成 document.createTextNode();

var text=document.createTextNode('cyl');

里面加上你想要的内容。需要插入操作。

注释节点的生成document.createComment();

同理把内容加进出就好了，也需要插入操作。

文档碎片节点的生成document.createDocumentFragment();

插

parentNode.appendChild();

看人代码:

<div></div>
            <span></span>
            <script type='text/javascript'>
            var div=document.getElementsByTagName('div')[0];
            var span=document.getElementsByTagName('span')[0];
            var text=document.createTextNode('cyl');
            span.appendChild(text);
            div.appendChild(span);

本来div span是并列结构，而且span里面没有什么东西。

![70 2][]把生成的节点丢进去就可以了。

parentNode.insertBefor(a,b);

在b的前面插入a

我继续生成一个span加到div里面span的前面。

![70 3][]

删

parentNode.removeChild();

在刚刚的状态下，继续操作。

![70 4][]![70 5][]

![70 6][]![70 7][]

应该看明白了吧。

上一级调用removeChild();就把对应的标签删除。

remove();

![70 8][]![70 9][]

的确都删除了。

替换

parentNode.replaceChild(new,origin)

把它子孙的元素节点替换了

<div></div>
            <script type='text/javascript'>
            var div=document.getElementsByTagName('div')[0];
            var span=document.createElement('span');
            div.appendChild(span);
            var a=document.createElement('a');
            </script>

![70 10][]

应该很简单。

Element的属性

1：innerHTML

<div>
                123
            </div>
            <script type='text/javascript'>
            var div=document.getElementsByTagName('div')[0];
            </script>

![70 11][]我们直接使用属性innerHTML表示查看，如果加=,+=时就是覆盖和加上值了。

2innerText||textContent

取文本内容

<div>
                <span>123</span>
                <em>456</em>
            </div>
            <script type='text/javascript'>
            var div=document.getElementsByTagName('div')[0];
            </script>

![70 12][]有一些区别的。

3：查看添加元素节点的属性

ele.setAttribute();添加

ele.getAttribute();查看

![70 13][]操作大致就是这样的。

[dom]: https://blog.csdn.net/wust_cyl/article/details/79953163
[70]: https://img-blog.csdn.net/20180417213804546?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220527/f6effa38818941b786a6086fa95fd55a.png
[70 2]: /images/20220527/c2bcd6c123ad456d85ee68ad9d963cd4.png
[70 3]: /images/20220527/4fa633de37044e4db8f80ed76fc48347.png
[70 4]: https://img-blog.csdn.net/20180417220623544?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: /images/20220527/7e5568d7e2614cdc8237b36a8dfc9b69.png
[70 6]: https://img-blog.csdn.net/2018041722072812?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: /images/20220527/9a8f81e8d74942ad8834e174cf1e6a6d.png
[70 8]: https://img-blog.csdn.net/20180417221118521?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 9]: /images/20220527/69006342cf9f445184a048cb7dcfbeb5.png
[70 10]: /images/20220527/7a675919037940af9b841c353739ff15.png
[70 11]: /images/20220527/11081e2d195f46f3882719bc1b38dac9.png
[70 12]: /images/20220527/caa2ab3cac7e4529a7c1867b47b5e90c.png
[70 13]: /images/20220527/8dd4dfd3033142e19de710993dc88f97.png