javascript基础

js节点是什么

JavaScript中的节点是页面中所有的内容（标签、属性、文本（文字、换行、空格、回车）），Node。

我们常用的节点标签：

元素节点（标签）

属性节点（标签里的属性）

如何获取节点

        元素节点获取有很多方法

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

Document.getElementsByClassName("类名")   通过类名来获取节点                                注意:返回带有指定名称的对象的集合,访问单个节点需要通过索引   

例如:Document.getElementsByClassName("img")[0];

Document.getElementsByTagName("标签名") 通过标签名来获取节点

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

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

Document.querySelector(".box")   指定选择器的第一个元素

注意:括号内可以写类名 但需要加. ,也可以写id名 但需要加#,也可以写标签名

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

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

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

查找元素节点

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

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

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

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

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

子节点查找父节点

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

查找兄弟节点

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

属性节点的获取

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

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

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

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

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

创建和操作元素对象

var _标签=document.createElement("标签名")  此时只是创建了,并没有添加元素.appendChild(_标签) 添加内容到元素的末尾, 此时真正添加进父元素 如果要添加内容到body内,直接写document.body.appendChild("内容")就添加成功了元素.append(标签或者文本)   

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

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

 参数1:必须 插入的节点

 参数2:必须 插入到哪里的之前  父节点对象.removeChild(删除的节点对象)   删除指定节点,需要用父元素来调用