DOM操作

最新推荐文章于 2024-02-28 20:34:33 发布

懒羊羊我小弟

最新推荐文章于 2024-02-28 20:34:33 发布

阅读量164

点赞数

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

本文链接：https://blog.youkuaiyun.com/IO14122/article/details/109707433

版权

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

文档对象模型DOM（Document Object Model），是W3C组织推荐的处理可扩展标记语言的标准编程接口。

一、获取节点

加载HTML页面的时候，web浏览器就会生成一个树形结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。

节点的基本属性：
- 节点.nodeType属性，用于表面节点的类型。节点类型用数值常量来表示，标签为1，属性为2，文本为3等。
- 节点.nodeName: 获取标签节点的标签名。
- 节点.nodeValue: 获取文本节点的内容
获取父节点:
子节点.parentNode: 属性指向父节点。
子节点.offsetParent: 指向与当前元素最近的定位父元素，没有定位父级，则指向body。
获取子节点

父节点.children；返回保存子元素的集合，是一个HTMLCollection对象（IE6-IE8完全支持children属性，但返回中包括元素，非标准模式）
父节点.childNodes；返回保存着一个NodeList对象，是一个类数组对象（对于元素间的空格，IE9及之前版本不会返回文本节点）
获取父元素的首尾节点

父元素.firstChilnd:获取第一个子元素ie可以正常使用，标准浏览器会获取到折行文本。
父元素.firstElementChild：获取第一个子元素，解决折行问题；
父元素.lastChild:获取最后一个子元素ie正常使用，标准浏览器会获取折行文本
父元素.lastElementChild:获取最后一个子元素，标准浏览器专用；
获取下一个兄弟元素

父元素.nextSibling: 获取下一个兄弟元素（标准浏览器会识别折行文本）；
父元素.nextElementSibling: 获取下一个兄弟元素，标准浏览器专用；

获取上一个兄弟元素

父元素.previousSibling: 获取上一个兄弟元素（标准浏览器会识别折行文本）；
父元素.previousElementSibling:获取上一个兄弟元素，标准浏览器专用；

<body>
    <ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ul>
    <script>
        // 获取父元素
        var ul = document.querySelector('ul');
        // 获取第一个子元素 同时兼容IE低版本
        var liOne = ul.firstElementChild || ul.firstChild;
        console.log(liOne.innerHTML);   // 我是li1

        // 获取最后一个子元素 同时兼容IE低版本
        var liLast = ul.lastElementChild || ul.lastChild;
        console.log(liLast.innerHTML);   // 我是li4

        // 获取第二个子元素 
        var liTwo = liOne.nextElementSibling || liOne.nextSibling;
        console.log(liTwo.innerHTML);   // 我是li2

        // 获取倒数第二个子元素
        var lastTwo = liLast.previousElementSibling || liLast.previousSibling;
        console.log(lastTwo.innerHTML);   // 我是li3

    </script>

二、操作节点

创建节点
document.createElement(‘创建的标签名’); 返回一个标签对象的应用；
document.createTextNode(‘文本’); 保存一个文本，传入标签对象中去；
在父元素的末尾添加元素
父元素.appendChild(要添加的子元素); 在父元素的末尾添加这样一个子元素；
删除节点
父元素.removeChild(被删除的子元素);在父元素中删除参数中的子元素；
父元素.remove(); 这个方法还会把父元素本身给删除；
替换节点
父元素.replaceChild(新的节点，被替换的节点); 两个参数分别是要插入的节点和要被替换的节点。
赋值节点
被复制的元素.cloneNode(Boolean); 参数传入一个Boolean值，如果为true表示复制标签和内容，默认为false，只赋值标签，不复制内容；
插入节点
父元素.insetBefore(要插入的节点，被插队的节点); 要插入的节点会插入到被插队的节点前面。（新节点是之前创建好已经在父元素中时，会替换位置而已）；

<ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ul>
    <script>
        // 获取父元素
        var ul = document.querySelector('ul');
        // 创建li节点
        var createLi = document.createElement('li');
        // 创建li里面的文本
        var text = document.createTextNode('我是新添加的li');
        // 将文本添加进li中
        createLi.appendChild(text);
        // 最后在页面中呈现出来
        ul.appendChild(createLi);
        console.log(ul.children.length);    // 5
        // 在第一个子元素前面插入元素
        ul.insertBefore(createLi,ul.firstElementChild);     // 本来在添加在最后一项li跑到了第一项
        // 删除最后与一个子元素
        ul.removeChild(ul.lastElementChild);    // 我是li4被删除
        // 替换节点  把现在的最后一个li替换成第一个
        ul.replaceChild(ul.lastElementChild, createLi); // 现在就变为 （我是li3 我是li1 我是li2）
        // 复制创建的节点
        var cloneLi = createLi.cloneNode(true);
        console.log(cloneLi);       // <li>我是新添加的li</li>

    </script>

三、获取元素

document.getElementById(ID名); 通过id名获取元素，id具有唯一性（不获取也能直接使用，但是不建议直接使用）；
document.getElementsByTagNage(标签名); 通过标签名获取元素（获取的一个元素集合）；
document.getElementsByClassName(类名);通过class类名获取元素（获取的是满足条件的元素集合）；
document.querySelector(css选择符); 接受一个css选择符，选择满足条件的第一个元素；
document.querySelectorAll(css选择符); 选择满足条件的所有元素组成的集合。

四、获取和操作属性值

设置属性值： 元素.setAttribute(‘属性名’，‘属性值’);
获取属性值： 元素.getAttribute(‘属性名’);
以上设置属性值与获取属性值的方法与自定义属性不同点在于：自定义属性在页面结构是看不见的，而setAttribute()方法设置的属性在页面结构中可以看到，再者set方法设置的属性值是元素打点获取不到的，get方法可以获取到。