JavaScript DOM节点简介

DOM由节点组成

在 HTML DOM (文档对象模型)中,每个部分都是节点:
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

1.重要节点类型:标签(元素)节点,属性节点,文本节点。

2.重要节点属性:
(1)nodeType 节点类型(数字表示,标签1,属性2,文本3)
(2)nodeName 节点名字
(3)nodeValue 节点值
3.不同类型节点的属性取值

标签节点属性节点文本节点
nodeType节点类型123
nodeName节点名字对应的标签名对应的属性名#text
nodeValue节点值null对应的属性值对应的文本内容
  • 标签节点:
    nodeType:1;
    nodeName:对应的标签名;
    nodeValue:null
  • 属性节点:
    nodeType:2;
    nodeName:对应的属性名;
    nodeValue:对应的属性值
  • 文本节点:
    nodeType:3;
    nodeName:#text;
    nodeValue:元素节点或属性节点中的文本内容
  • 文档节点:
    nodeType:9;
    nodeName:表示整个文档(DOM 树的根节点)
    nodeValue:document

获取节点

  • 获得当前元素的父节点 : .parentNode
  • 获得当前元素的子节点 :
    .childNodes(标准属性)获取标签节点和文本节点
    .children不是DOM的标签属性,但是所有的浏览器都支持,只会获得标签子节点
  • 获取相邻节点的属性:

[next(previous)Sibling]、[next(previous)ElementSibling]

.nextSibling :
返回指定节点之后紧跟的节点(同级)。
被返回的节点以 Node 对象返回,元素中的空格被视作文本,而文本被视作文本节点
IE8及之前的浏览器会忽略空白文本节点

function getPrevNode (dom){
  var preNode=dom.previousSibling;
  var txt=preNode.nodeValue.trim(); //'    '
  if(preNode.nodeType==3 && txt.length==0){
     return preNode.previousSibling
  }else{
    return preNode
  }
}

.nextElementSibling:
IE8及之前的浏览器不支持这个属性,只会获得标签节点

//解决兼容性的问题
function getNextElement(element){

    if(element.nextElementSibling){
        return element.nextElementSibling;
    }else{
        var ele = element.nextSibling;
        console.log(ele)
        while(ele && ele.nodeType !==1){
            ele= ele.nextSibling;
        }
        return ele;
    }
}
  • 父元素的first与last子节点 :[first(last)Child]、[first(last)ElementChild]

.firstChild:
所有的浏览器都支持的,获取标签节点、文本节点,
但是IE8及之前的低版本的浏览器,是可以忽略空白文本节点的而获得的是标签节点

.firstElementChild:
IE8及之前的低版本的浏览器不支持,直接获取父元素的第一个标签节点

function getFirstElementChild(element){
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
         var ele =  element.firstChild;
        while(ele && ele.nodeType !==1){
               ele = ele.nextSibling;
        }
        return ele;
    }
}

function getLastElementChild(element){
    if(element.lastElementChild){
        return element.lastElementChild;
    }else{
        var ele = element.lastChild;
        while(ele&&ele.nodeType!==1){
           ele=  ele.previousSibling;
        }
        return ele;
    }
}

总结

  • . childNodes ;(标准属性)、next(previous)Sibling、first(last)Child
    [不但可以获得标签节点,还会获取文本节点,但ie8及之前浏览器会忽略空本文本节点]
  • .children;[所有浏览器都支持,只会获得当前元素的标签子元素]
    next(previous)ElementSibling、first(last)ElementChild
    [IE8及之前的低版本浏览器不支持,只获取标签节点]

节点操作

动态创建节点元素

document.createElement(“标签名”);//创建元素节点;
document.createTextNode(“txt”);//创建文本节点;

1.父级元素. appendChild(节点元素)–把节点插入到父节点的末尾

2.父级元素.insertBefore(新节点,插入位置)–把新节点插入到位置的前面

  1. 父级元素.removeChild(节点元素); //删除节点元素
  2. 父级元素.replaceChild(节点1,节点2); //用节点1替换节点2

克隆节点:

cloneNode(boolean值)
1.该方法将复制并返回调用它的节点的副本。
2.如果传递的参数是 true,将递归复制当前节点的所有子孙节点。False的话只复制当前节点。

如果参数为False的话,仅仅克隆的是一个标签(不传参,默认值为false)

如果参数为true的话,标签之间的内容也会克隆,也叫做深度克隆

3.返回的节点不属于文档树,它的 parentNode 属性为 null。
4.当复制的是 Element 节点时,它的所有属性都将被复制。但是,当前节点上注册的事件不会被复制

节点属性

基本用法

1.对象.的方式设置、获取属性[元素是DOM对象]

例如:txt.value=”123”;{不能设置、获取自定义属性}

2.setAttribute(属性名,属性值) :设置属性,也可设置自定义属性,推荐使用
注意:设置已经存在的属性时,会将原来的属性值覆盖
3.getAttribute() 可获得行内的原生属性,也可获得自定义属性

4.removeAttribute(要移除的属性名) 彻底删除

给元素节点设置样式

给元素设置样式的两种形式(通过对象.的方式):

1.设置类名
className:元素的一个属性,设置类名;
[加入要为某个元素添加多个样式时,可以将样式都放在一个css的类样式中,然后通过元素的属性className获取该类名。]

  • dom.setAttribute(‘class’,’xxx’);

IE6/7不支持setAttribute(‘class’,xxx)方式设置元素的class。

  • dom.setAttribute(‘className’, ‘xxx’)

IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute(‘className’,xxx)方式设置元素的class

  • dom.className = ‘xxx’;

所有浏览器都支持

dom.className = dom.className.replace(“hide”,”show”);
//字符串的替换,仅仅是替换了要替换的字符,不改变其它的

2.Style:元素的一个属性,通过其设置一个样式。
例如:

dom.style.backgroundColor='red'; //将样式的中横线写法换成驼峰的写法
dom.style.background='red';
dom.style.color='red';
  1. 设置、清除类的方式
1.设置类名:dom.className='类名';
2.清除类名:dom.className='';
3.彻底清除类的属性:dom.removeAttribute('class')

设置、获取标签中的文本内容

获取内容区别:
1.innerText只打印标签之间的文本内容,不打印标签
2.innerHTML,不但打印文本内容,连标签间的标签也打印出来。高版本浏览器会将格式原样输出

设置内容区别:
1.innerText 设置内容时,无法设置标签,会将标签进行转义。
2.innerHtml设置内容时,能将里面的标签渲染成正常的html标签 。

小结:
(1)innerHTML所有的浏览器都支持,不但获取文本,还获取标签间的标签。
(2)innerText是老版本的火狐浏览器不支持,只支持用textContent;
(3)textContent是Ie8之前的浏览器不支持,只支持innerText;

动态创建元素

凡是通过js来设置页面的标签都可以称为动态的创建页面元素。
1.document.write() 几乎是很少用的
2.InnerHTML:直接在里面写html代码生成标签
3.document.creatElement(标签名):创建一对标签

获取样式

obj.style:只能获取html标签中的style属性中的值(style=”…”)

获取定义在<style type=”text/css”>里面属性方法:
.currentStyle(IE外部css文件)
.getComputedStyle (FF,只读,不能设置)

var btn=document.getElementById("button")
btn.onclick = function() {
    var oStyle = btn.currentStyle? btn.currentStyle : getComputedStyle(btn, null);
    /*alert(oStyle.height);*/
    alert(oStyle['height']);
};

JS事件

注册事件
1.行内式注册事件(在标签内)
2.内嵌式注册事件

事件:
1.onfocus
2.onblur
3.onchange
4.onmouseover
5.onload
6.onkeyup

btn.onclick = function(e){
// 通过事件对象可以获得一些与事件相关的一些信息
// 事件对象里面存储了一些与事件相关的属性或是方法
// e.clientX   pageX   screenX
// IE8之前是不支持event   window.event  IE8也有事件对象,只不过是存在window属性里面,必须通过Window.event才能拿到

        e  = e || window.event;

        console.log(e)
    }
    原文作者:Twait
    原文地址: https://segmentfault.com/a/1190000017740122
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞