DOM操作总结

最新推荐文章于 2021-03-25 13:27:49 发布

泠泉石上

最新推荐文章于 2021-03-25 13:27:49 发布

阅读量418

点赞数

分类专栏： js与jQuery 文章标签： dom

本文链接：https://blog.csdn.net/cyp18408251336/article/details/54743976

版权

js与jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DOM操作总结

初识DOM

DOM是在ECMAScript基础上添加的提供访问和操作网页内容的方法和接口。可操作HTML中的标签内容、样式、结构。

基本选择器

ID选择器：

    1.getElementById('ID')
    2.直接使用ID名称选择（浏览器会将ID挂在载window对象上，因此在构建页面时，应该少用ID。这种选择方法存在兼容问题）

var box1 = document.getElementById('box');

var box2 = box;

标签选择器：

    1.getElementsByTagName('标签名')

Name选择器：

    1.getElementsByName('Name')

类选择器：

    1.getElementsByClassName('类名')（存在兼容性问题）

综合选择器：

    1.querySelector('CSS选择器')
        选择对应元素的第一个，结果为一个元素。
    2.querySelectorAll('CSS选择器')
        选择对应元素的所有，结果为数组。

综合群组选择器与其他群组选择器的区别：

<body>
        <div id="father">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <script type="text/javascript">
            //通过两种方法选择元素
            var box1 = father.getElementsByTagName('div');
            var box2 = father.querySelectorAll('div');
            console.log('第一次',box1.length);//输出3
            console.log('第一次',box2.length);//输出3

            //添加元素
            var newChild = document.createElement('div');
            newChild.innerHTML = '4';
            father.appendChild(newChild);

            console.log('第二次',box1.length);//输出4
            console.log('第二次',box2.length);//输出3
        </script>
    </body>

被综合群组选择器选出的元素为NodeList集合，而被其他群组选择器选出的为HTMLCollection集合。具体差别见：

http://www.cnblogs.com/summerTea/p/4943533.html

被综合群组选择器选中的元素形成的变量并不会受到其他DOM操作的影响。而被其他群组选择器选中的元素形成的变量会与真实的DOM节点形成引用关系，操作DOM时会同时修改该变量。

基本DOM操作

创建元素

createElement('标签名称')
    创建一个元素到内存。

添加元素

1.父节点.appendChild(元素节点)
    在父节点最后插入新节点。
2.父节点.insertBefore(要插入的节点，已存在的节点)
    在所选节点前插入新节点。

删除元素

父元素.removeChild(元素节点)
    在父元素中删除对应子元素。

替换元素

父元素.replaceChild(新元素，旧元素)
    在父元素中用新元素替换旧元素。

添加内容或元素

元素.innerHtml=''
    在父元素中添加内容或元素。

获取自定义属性值

元素.getAttribute('属性名')
    获取属性值。

修改自定义属性值

元素.setAttribute('属性名',值)
    修改属性值。

泠泉石上

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM操作总结

DOM操作总结初识DOMDOM是在ECMAScript基础上添加的提供访问和操作网页内容的方法和接口。可操作HTML中的标签内容、样式、结构。基本选择器ID选择器： 1.getElementById('ID') 2.直接使用ID名称选择（浏览器会将ID挂在载window对象上，因此在构建页面时，应该少用ID。这种选择方法存在兼容问题）var bo
复制链接

扫一扫