JavaScript之元素节点

1.获取元素节点

1)直接获取

① document.getElementById()

② document.getElementsByName()

③ document.getElementsByTagName()

2)间接获取

父子关系

firstChild lastChild childNodes

子父关系

parentNode

兄弟关系

nextSibling previousSibling

2.操作属性节点

1)通过对象“.”属性，来操作属性

优：可以动态获取用户修改的属性值

缺：不能获取自定义属性的值

2)getAttribute("key") setAttribute("key","value") removeAttribute("key")

优：可以获取自定义属性的值

缺：不能动态获取用户修改的属性值

3.处理文本节点

1) 通过对象.innerText 获取标签内部的文本信息

2) 通过对象.innerHTML 获取标签内部的HTML代码

4.动态改变DOM结构

1)创建一个结点对象

document.createElement("标签名")

2)（父结点）追加子结点对象

fatherNode.appendChild(子结点对象)

3)（父结点）在指定结点前添加子结点

fatherNode.insertBefore(新结点对象，参考结点对象)

4)（父结点）替换旧的子结点对象

fatherNode.replaceChild(新结点对象，旧结点对象)

5)（父结点）删除旧子结点对象

fahterNode.removeChild(旧结点对象)

5.动态改变元素的css样式

1)我们通过对象.style属性操作对象的css样式：样式名称中有“-”将“-”去掉，并将“-”后一个字母改为大写来作为样式的新名称

2)我们希望通过class为一个对象添加一个class样式，添加属性名是className，而并非class（class是js的关键字，并能作为属性名存在）