javascript DOM控制节点、增，删，改，查，快速记忆

Document.getElementById("#id")                     Id 通过标签id来获取节点

Document.getElementsByClassName("类名")            ClassName 通过类名来获取节点 
访问单个节点需要通过索引   
Document.getElementsByClassName("img")[0];

Document.getElementsByTagName("标签名")    TagName 通过标签名来获取节点
<div></div>
Document.getElementsByTagName("div");

Document.querySelector(".box")   指定选择器的第一个元素
注意:括号内可以写类名 但需要加. ,也可以写id名 但需要加#,也可以写标签名

Document.querySelectorAll("li")   指定选择器的所有元素 

注意:返回带有指定名称的对象的集合,访问单个节点需要通过索引   

例如:Document.querySelectorAll("li")[0];

查找元素节点

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

通过父节点对象查找所有子节点对象

元素.firstChild 查找父节点里第一个节点 可能有文本节点 (如:换行 ) 兼容性好

元素.lastChild 查找父节点里的最后一个节点,也可能有文本节点       兼容性好

元素..childNodes 查找父节点里的所有的子节点,也可能有文本节点 兼容性好

通过父节点对象查找子元素节点对象

元素.firstElementChild 查找父节点下第一个节点 只包含元素  兼容性一般


元素.lastElementChild 查找父节点的最后一个节点                  兼容性一般


元素.children 查找父节点下的所有的子元素节点                       兼容性一般

子节点查找父节点

元素.parentNode 通过子节点查找父节点

元素.parentElement 通过子元素查找父元素

查找兄弟节点

元素.nextSibling 查找下一个兄弟节点,但可能为文本

元素.previousSibling 查找上一个兄弟节点,可能为文本

元素.nextElementSibling 查找下一个兄弟元素节点 

元素.previousElementSibling 查找上一个兄弟元素节点

属性节点的获取

元素.attributes 获取元素身上所有属性构成的集合
 

元素.setAttribute（“属性名”，“属性值”）根据节点对象给元素设置属性和属性值
 

元素.getAttribute（“属性名”）获取属性值的方法

元素.属性名 也可以获取属性值,但只能获取语言设计好的属性名的值,自定的的属性没办法获取


元素.removerAttribute("属性")    根据节点对象删除指定的属性名和属性值

创建和操作元素对象

ar _标签=document.createElement("标签名")  此时只是创建了,并没有添加

元素.appendChild(_标签) 添加内容到元素的末尾, 此时真正添加进父元素
如果要添加内容到body内,直接写document.body.appendChild("内容")就添加成功了

元素.append(标签或者文本) 

 

元素.cloneNode（boolean）：克隆节点
参数可选: 不写则默认是false 是浅拷贝 只拷贝该节点和属性 不拷贝子节点
                 true 是深拷贝  拷贝节点的所有内容 包括子节点

父节点对象.insertBefore(新节点,参照节点)  把参数1节点对象插入到参数2节点对象之前

 参数1:必须 插入的节点

 参数2:必须 插入到哪里的之前  

父节点对象.removeChild(删除的节点对象)   删除指定节点,需要用父元素来调用