欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

DOM基础

程序员文章站 2024-03-20 10:24:34
...
  1.  DOM节点
  •  childNodes : 获取子节点，但是有兼容问题
<ul id="ul">
         <li></li>
        <li></li>
 </ul>
 

 let number = ul.childNodes;    // 输出number = 5


原因：在HTML文档里，空的内容表示一个文本节点；<li>表示元素节点，使用childNodes 其实是获取了<ul>元素下的文本节点、元素节点、文本节点、元素节点和最末尾的一个文本节点。所以输出结果为5

 

  •  nodeType ：表明节点类型，可搭配childNodes使用，判断属于文本节点还是元素节点

文本节点的 nodeType == 1

但是，nodeType和childNodes是有兼容性问题的，一般在IE6 -- 8下是能正常运行的

  • children : 和childNodes类似，也是用于获取子节点，但是他们俩之间的唯一区别是，children不会取得文本节点，而且在Chrome和Firefox下也能运行

当要兼容使用时，需要两个搭配

  •  parentNode  获取父节点，在结构上的父元素，唯一的

例子：点击链接，隐藏整个li

 

  •  offsetParent  获取父节点，此时的父元素是当前子元素定位后的实际父元素。不唯一的
  • 首尾子节点

    firstChild（兼容性问题，同childNodes）、firstElementChild

    lastChild（兼容性问题）、lastElementChild

 

  • 兄弟节点

   获取下一个：nextSibling（兼容性问题，同childNodes）、nextElementSibling

   获取上一个： previousSibling（兼容性问题）、previousElementSibling

 

  •  元素属性操作

    第一种：div.style.display = "block"；

    第二种：div.style["display"] = "block";

    第三种：DOM方式

 

  •  DOM方式操作元素属性

    获取：getAttribute(name)
              设置：setAttribute(name,value)
              删除：removeAttribute(name)

 

  •   使用 className 选择元素
function getClassName(parent,className) {      //封装函数，用于获取相同子节点下的类名相同的元素
            let array=[]; // 存放名字相同的元素
            let elements = parent.getElementsByTagName("*");    // 获取当前parent元素下的所有元素节点
            for(let i=0;i<elements.length;i++){
                if(elements[i].className == className)
                    array.push(elements[i]);
            }

            return array;
        }

 创建、插入和删除元素

  • 创建DOM元素

createElement(标签名)         创建一个节点

appendChild(节点)                追加一个节点

  • 插入元素

insertBefore(节点，原有节点)       在已有元素前插入

例子：倒序插入li

<body>
<input type="text" id="text"><input type="button" value="添加" id="btn">
<ul id="ul"></ul>
<script>
    window.onload = function () {
        let btn = document.getElementById("btn");
        let ul = document.getElementById("ul");
        let text = document.getElementById("text");

        btn.onclick = function () {

            // 创建新节点
            let li = document.createElement("li");
            let ul_li = ul.getElementsByTagName("li");

            li.innerText = text.value;

            // 将新节点追加到ul下
            // ul.appendChild(li);

            // 倒序添加
            if(ul_li.length>0){
                ul.insertBefore(li,ul_li[0]);   // 避免在低版本的IE下不兼容问题
            }else {
                ul.appendChild(li);
            }
        }
    }
</script>

  • 删除DOM元素

removeChild(节点)              删除一个节点

例子：删除li

上一篇： JavaScript高级 (函数 BOM DOM)

下一篇： BOM和DOM

推荐阅读