JS-DOM-元素节点

查看元素节点:
1、getElementById():通过 id 取到唯一节点;如果 id 重名,只能取到第一个
getElementByName(): 通过name属性
getElementByTagName(): 通过标签名
getElementByClassName(): 通过class名
 获取元素节点时,一定要注意:获取节点的语句,必须在 DOM 渲染完成之后执行。2种方式实现:
①将 JS 代码写在 body 之后
②将代码写到window.onload 函数之中
后面三个，取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作
例如: getElementByName("name1")[0].onclick = function

查看/设置属性节点:
1、查看属性节点:getAttribute("属性名");
2、设置属性节点:setAttribute("属性名","新属性值");

>>>查看和设置属性节点,必须先取到元素节点,才能使用
>>>setAttribute():在IE浏览器中可能会存在兼容性问题。比如在IE中不支持使用这个函数设置style/onclick等
样式属性和事件属性

>>>我们推荐使用点符号法代替上述函数:
eg:dom1.style.color="" dom1.style.onclick="" dom1.style.src=""

查看设置文本节点:
1、 .innerText: 取到或设置节点里面的文字内容;
.innerHTML: 取到或设置节点里面的HTML代码
.tagName : 取到当前节点的标签名,标签名全部大写显示。


总结: JS 修改DOM节点的样式
1、使用setAttribute()设置class和style属性，但存在兼容性问题，
不提倡 div.setAttribute("class","cls1");

2、使用 .className直接设置class类,注意是 className而不是.class:
div.className="cls1"

3、使用 .style设置单个属性,注意属性名要使用 驼峰命名法:
div.style.backgroundColor="red";

4、使用.style 或 .style.cssText 设置多个属性样式:
div.style="background-color:red;color:yellow;"
div.style.cssText="background-color:red;color:yellow;"

【删除或替换节点】
1. 父节点.removeChild(被删节点): 删除父节点中的子节点；
2. 父节点.replaceChild(新节点,老节点): 使用新节点，替换掉老节点

【创建并新增节点】
 1. document.createElement("标签名")：创建节点 。需要配合 setAttribute设置各种新的属性；
 2. 父节点.appendChild(新节点)：末尾追加方式插入节点
3. 父节点.insertBefore(新节点,目标节点)：在目标节点前插入新节点.
4. 被克隆节点对象.cloneNode(true/false)：克隆节点
 >>> 传入true： 表示克隆当前节点，以及当前节点的所有子节点；
 >>> 传入false或不传： 表示只克隆当前节点，而不克隆子节点。

【根据层次获取节点】

这些方法调用后面都不加括号,例如下述紧跟示例代码
 1 .childNodes： 获取元素的所有子节点。包括回车等文本节点。

.children: 获取当前元素的所有元素节点(只获取标签)。

 2 .firstChild: 获取元素的第一个子节点。包括回车等文本节点。
 .firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
 .lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
 .lastElementChild:获取元素的最后一个子节点。不包括回车等文本节点。
 3 .parentNode: 获取当前节点的父节点。
 4 .previousSibling: 获取当前节点的前一个兄弟节点；包括回车等文本节点。
 .previousElementSibling:获取当前节点的前一个兄弟节点；不包括回车等文本节点。
 5 .nextSibling: 获取当前节点的后一个兄弟节点；包括回车等文本节点。
 .nextElementSibling: 获取当前节点的后一个兄弟节点；不包括回车等文本节点。
 6 .getAttributes: 获取当前节点的属性节点。