JS DOM知识点

Posted 2020-10-08

DOM(document Object Model)文档对象模型

childNodes有兼容性问题，需要nodeType兼容
alert(child.nodeType) chrome ,firfox IE9【7】 IE8【3】
if(child.nodeType==1){}

获取和设置内容，属性，样式
length 【数组的长度】
value 【获取设置input的内容】
innerhtml【支持HTML标签，所以隐藏】
inneText 【不支持HTML标签，所以显示h1】

obj.getAttritude("atriName")
obj.setAttritude("atriName","attrValue")

obj.style.styleName;
obj.className="active";

 

获取元素的样式
getComputedStyle(obj,false)["attr"] //chrome ,safari
obj.currentStyle["attr"] //IE8以下

 

节点类型主要有三种:元素节点，属性节点，文本节点
节点类型 nodeName nodeType nodeValue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容(不包含html标签)

DOM操作是围绕元素节点和属性节点的增删改查

【查找节点】
【在对DOM进行增删改之前，首先要找到对应的元素】
var body=document.body
var header=document.getElementByid("header");
var inputs=header.getElementsByTagName("input");【input必须在id为header的标签里边】
【H5新增选择器：IE8不支持】
document.getElementByClassName("footer");
document.querySelector("#header/.header/div/#header>div") 【CS支持的选择器，她都支持】【返回第一匹配的元素】
document.querySelectorAll("#header/.header/div/#header>div")【index】【CS支持的选择器，她都支持】【返回所有匹配的元素数组】

同时可以利用元素节点的关系获取它的父子节点和兄弟节点

node.parentNode //返回父节点

node.childNodes //返回子节点列表NodeList,
node.firstChild //返回父节点的第一个子节点
node.lastChild //返回父节点的最后一个子节点
node.previousSibling //返回前一个节点
node.nextSibling //返回后一个节点
【兼容性问题】
chrome/firfox/IE9:
previousElementSibling, nextElementSibling
firstElementChild, lastElementChild
IE8:
previousSibling, nextSibling
firstChild, lastChild
【为了兼容IE8，div.firstChild.innerHTML必须先放在前边】
alert(div.firstChild.innerHTML || div.firstElementChild.innerHTML )

【增加节点】
创建元素节点
var create=document.createElement("p");
创建文本节点
var text=document.createTextNode("hello")
复制节点
var clone=node.cloneNode(true/false)
true:复制该节点以及该节点的所有子节点
false:只能复制该节点，
插入节点
parentNode.appendChild(node) //将新节点追加到父节点的末尾
parentNode.insertBefore(newNode,targetNode)//将新节点插到目标节点之前
替换节点
parentNode.replace(newNode,targetNode) //用新节点替换目标节点

【删除节点】
parentNode.removeChild(targetNode)//删除目标节点
targetNode.parentNode.removeChild(targetNode)//在不知道父节点的情况下使用