DOM操作指南-优快云博客

获取节点的属性

1.获取div的上一个节点

div.previousSibling;

2.获取div的上一个标签节点

div.previousElementSibling;

3.获取div的下一个节点

div.nextSibling;

4.获取div的下一个标签节点

div.nextElementSibling;

5.获取div的第一个子节点

div.firstChild;

6.获取div的第一个子标签节点

div.firstElementChild

7.获取div的最后一个子节点

div.lastChild;

8.获取div的最后一个子标签节点

div.lastElementChild

以上的获取方法ie8中不支持获取标签节点

// 封装了一个获取任意父级元素的第一个子元素的兼容版本函数
function getFirstElementChild(element) {
        if(element.firstElementChild){//如果支持该方法
            return element.firstElementChild;
        }else{
            var node=element.firstChild;
            while(node&&node.nodeType!=1){//node存在且node不是标签节点
                node=node.nextSibling;
            }
            return node;
        }
    }

9.获取div的所有子节点

div.childNodes;//子节点
div.children；//子元素

10.获取父节点

 div.parentNode//父级节点
 div.parentElement//父级元素，ie标准

11.获取文本

div.innerHTML//获取或修改子元素的文本结构
div.outerHTML;//自己和子元素的文本结构
div.innerText//获取或修改文本内容 ，只适用于双标签
表单元素.value//获取或修改表单元素的显示内容，文本内容不变

// 封装了一个获取标签之间的文本信息兼容版本函数
    function getText(element) {
        if(element.innerText) {
            return element.innerText;   //IE8及之前的浏览器支持，现在两者都支持
        }else {
            return element.textContent; //低版本的火狐支持
        }
    }

12.获取节点的属性

div.nodeType;//节点的类型(1------标签节点，2------属性节点，3------文本节点)
div.nodeName;//节点的名字(大写的标签名------标签节点，小写的属性名------属性节点，#next------文本节点)
div.nodeValue;//节点得值(null-----标签节点，属性值------属性节点，文本内容-----文本节点)

13.获取body标签

document.body

14.获取title的值

document.title

15.获取html

document.documentElement

获取节点的方法

1.判断该节点是否有子节点，返回布尔值

 节点.hasChildNodes();

2.获取id名为该字符串的节点，返回一个元素对象

document.getElementById("id值");

3.获取类名为该字符串的节点，返回节点集合

document.getElementsByClassName("类名")

4.获取name属性得值为该字符串的节点，返回节点集合

document.getElementsByName("name值")

5.获取标签为该字符串的节点，返回节点集合

document.getElementsByTagName("标签")

6.获取该选择器的节点，返回一个节点

document.querySelector("选择器的名字")

7.获取该选择器的节点，返回节点集合

 document.querySelectorAll("选择器的名字")

文本操作

div.appendData("内容")//在div文本节点后面添加该内容
div.deleteData(start,length)//将从start处删除length个字符
div.insertData(start,添加的内容)//插入文本
div.replaceData(start,length,替换后的内容)//替换文本
splitData(offset);//在offset处分割文本节点

创建节点

var myp=document.createElement("标签");//创建一个标签节点
var mytext=document.createTextNode("内容");//创建一个文本节点
var myattr=document.createAttribute("属性名"); //对某个节点创建属性

在标签之后插入节点

myp.appendChild(mytext);//将文本内容加在标签中
div.appendChild(myp);//将p标签节点加到div节点的最后面

在标签之前插入节点

 div.insertBefore(新节点,标签);

移动节点

div1.appendChild(div2);//将div2节点放入div1节点

删除节点

div1.removeChild(div2);//删除div1节点中的div2节点

替换节点

div.replaceChild(新节点,原节点);

克隆节点

let newnode=div.cloneNode(true);//true复制所有，false不复制子节点
div.appendChild(newnode);

获取属性

div.getAttribute("属性名");//获取为该属性名的属性值

设置属性

div.setAttribute("属性名","属性值");//设置该属性名的属性值

dom浏览器获取div的最终样式

document.defaultView.getComputedStyle(div,null).属性名

ie浏览器获取div的最终样式

 div.currentStyle.属性名;

封装获取浏览器最终样式的函数

function getStyle(element, attr) {
        //判断浏览器是否支持这个方法
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
    }