[DOM]dom简单整理(1)

1.节点的的三大属性

　　nodeType:节点类型,值为一个数字,只能判断节点的类型无法细致区分每个标签的名称,需要nodeName

　　　　document:9;

　　　　Element:1;

　　　　attribute:2;

　　　　Text:3

　　nodeName:节点名称

　　　　nodeType为Element:得到的标签名(全为大写)

　　　　nodeType为Attribute:得到的是属性名

　　　　nodeType为Text:返回的是#text

　　　　nodeType为document:返回的是#document

　　nodeValue:节点内容

　　　　当nodeType为Element:返回的是null(无效,也就是说当nodeType为Element的时候用nodeValue没意义)

　　　　当nodeType为Attribute:返回的是属性值

　　　　当nodeType为Text:返回的是文本内容

2.节点关系

　　@node节点

　　　　#父子节点

　　　　　　parentNode

　　　　　　childNodes

　　　　　　firstChild

　　　　　　lastChild

　　　　#兄弟关系

　　　　　　previousSibling

　　　　　　nextSibling

　　@元素节点

　　　　#父子关系

　　　　　　parentElement

　　　　　　children

　　　　　　firstElementChild

　　　　　　lastElementChild

　　　　#兄弟关系

　　　　　　previousElementSibling

　　　　　　nextElementSibling

　　对比:

　　　　node节点优点是包含所有的节点,缺点是除parentNode外均受空字符的影响,而且childNodes获得的是动态集合,也就是没调用一次就要重新查询

　　　　元素节点的优点就是不受空字符的影响,缺点是仅包含元素节点不能包含所有的节点

3.查找节点

　　@按照ID查找

　　　　var elem=document.getElementById("id"); //找不到返回的是null,传入的是ID,比如id="box",传入的参数为box而不是#box

　　@按照标签名查找

　　　　var elem=parent.getElementByTagName("标签名")

　　　　找到的是parent下的所有的指定标签的名的元素对象,如果没查到返回的是空集合,即使只查询到一个也要用[0]取出

　　@按照name属性查找

　　　　var elem=document.getElementByName("name");

　　　　一般含有name属性的是form里面的input,所有可简写为form.name.返回值及处理方法和getElementByTagName一致

　　@按照class查找

　　　　var elem=document.getElementByClassName("class属性名")

　　　　返回值及处理方法同getElementByTagName

　　@选择器查找按照选择器查找

　　　　var elem=parent.querySelector("selector");返回的是符合要求的元素

　　　　var elems=parent.querySelectorAll("selector"):返回的是所有符合要求的元素

4.修改节点的值

　　@内容

　　　　elem.innerHTML:获取的是标签开始到标签结束的所有内容(哪怕标签之内还有标签)

　　　　　　获取:console.log(elem.innerHTML)

　　　　　　修改:elem.innerHTML="修改标签之间的内容";

　　　　elem.textContent:获取标签开始到标签结束的之间的文本内容,去掉子标签

　　　　虽然elem.innerText在大多数比较新的浏览器中是可以实现textContext的功能,但是在低版本的IE浏览器中无法识别innerText

　　@属性

　　　　#获取属性值

　　　　　　通过节点对象获取属性值

 　　　　　　　　1.var attrNode=elem.attributes[i/"属性名"];

　　　　　　　　　　attrValue=attrNode.value;-->获得属性值

　　　　　　　　2.var attrNode= elem.getAttributeNode("属性名");

　　　　　　　　　　attrValue=attrNode.value;-->获取属性值

　　　　　　直接获取属性值

　　　　　　　　var attrValue = elem.getAttribute("属性名");

　　　　#设置属性值

　　　　　　1.attrNode=document.createAttribute("属性名");//创建属性节点

　　　　　　　　attrNode.nodeValue=属性值;//设置属性值

　　　　　　　　elem.setAttributeNode(attrNode);//将属性节点添加到元素上去

　　　　　　2.elem.setAttribute("属性名",属性值);

　　　　#移除属性

　　　　　　elem.removeAttribute("属性名");

　　　　#判断属性是否存在

　　　　　　var bool = elem.hasAttribute("属性名");

　　　　HTML的DOM只能访问HTML的标准属性,不能访问自定义属性,解决方案就是使用核心DOM

　　　　HTML5中规定所有的自定义属性必须以data-开头,

　　　　　　访问自定义属性elem.dataset.属性名;属性名前面不加data-;　　

　　　　　　　　eg:　　<div id="aa" data-bb="cc"></div>
　　　　　　　　　　　　var aa=document.getElementById("aa");
　　　　　　　　　　　　console.log(aa.dataset.bb)//cc
　　@样式
　　　　内联样式
　　　　　　获取elem.style.属性名
　　　　　　　　1.只可获取内联样式
　　　　　　　　2.在JS中属性名均是去横线变驼峰
　　　　　　　　　　css:background-color
　　　　　　　　　　JS:backgroundColor
　　　　　　　　3.取值时要去掉单位,转为浮点数,赋值时要加单位
　　　　由于内联样式无法所有应用到元素上的样式,所以在开发中获取计算后的所有样式很有必要
　　　　　　var style=getComputedStyle(elem);
　　　　　　　　获取属性值:attrValue = style.属性名
　　　　　　在IE8及以下中不兼容getComputedStyle();
　　　　　　　　IE8:var style=elem.currentStyle;