JS Dom元素属性、样式的获取 子父元素的操作

一、属性、样式的获取和设置

1. 属性

1. 获取属性的方式：
1）ps.属性名
2）ps.getAttribute(属性名)
2. 设置属性的方式：
1）ps.属性名＝属性值
例子：ps.className=“one two”; // 赋多个值，用空格隔开
2）ps.setAttribute(属性名，属性值)
例子：ps.setAttribute(“class”,“one two”); // 赋多个值，用空格隔开
3. 自定义属性的设置、获取
1）设置
方法一、 直接在元素内用" data-src "设置属性
< li class=“lilist” data-as=“as”>元素1< /li>
方法二、在JS中设置属性
btn.setAttribute(“data-src”, “./img/1.jpg”);
2）获取
btn.getAttribute(“data-src”);

2. 样式

一. 行内样式的获取、设置

1. 获取
   方法一、ps.style.样式名
   方法二、window.getComputedStyle(btn).width；
2. 设置
   ps.style.样式名＝样式值 （样式名是驼峰式写法）

二. 内嵌、外部样式的获取

1. 获取
   window.getComputedStyle(btn).width；
2. 设置
   ps.style.样式名＝样式值 //设置后样式变成了行内样式

二、子父元素的操作

1. nodeType 节点类型:
元素节点 （1） 属性节点 （2） 文本节点（3）注释节点（8）
例子：
var ulele = document.getElementsByTagName(“ul”)[0];
for(var i=0;i<ulele.childNodes.length;i++)
{
if(ulele.childNodes[i].nodeType==1)
{
console.log(ulele.childNodes[i]); //过滤出了所有节点里的元素节点
}
}
2. nodeName 节点名称
3. nodeValue 节点值

总结：

1. 元素节点没有节点值，符号节点和文本节点都有节点值。
2. nodeValue只能用在节点之后获取节点值，不能用在元素之后。
3. #text是符号节点。

1. 添加子节点

1. 创建元素 :
var ps=document.createElement(“p”);
添加内容方法一：
var a= document.createTextNode(“p1”);
ps.appendChild(a);
添加内容方法二：
ps.innerHTML=“p1”;
2. 添加节点：
var div1 = document.getElementById(“div1”);
div1.appendChild( ps); 添加到父元素的最后面

2. 删除子节点：

父元素. removeChild( ps);

3. 替换子元素:

父元素. replaceChild( 替换的新元素，被替换的旧元素)

4. 获取子节点:

父元素. childNodes ——包含空白节点，获取的是节点列表，不是数组，但类似于数组
父元素. children ——不包含空白节点，获取的是子元素的集合
父元素. childNodes.length ——子节点的个数
父元素. children.length ——子元素的个数
父元素. childElementCount——子元素的个数
父元素. childNodes[索引号]——获取对应子节点
父元素. children[索引号]——获取对应子元素
父元素. firstChild——第一个子节点
父元素. lastChild——最后一个子节点
父元素. firstElementChild ——第一个子元素
父元素. lastElementChild——最后一个子元素

5. 插入子节点:

父元素. insertBefore(新元素，参考元素)

6. 获取父节点:

下面两个结果一样：
子元素. parentNode 父节点
子元素. parentElement 父元素

7. 获取同胞兄弟节点:

元素. previousSibling 前一个兄弟节点
元素. nextSilbling 后一个兄弟节点
元素. nextElementSibling 后一个兄弟元素
元素. previousElementSibling 前一个兄弟元素