webAPI 第四天 --- 节点操作,上下节点,添加节点,复制节点,删除节点,替换节点

节点操作(很重要)

一.节点属性

1.childNodes   所有的子节点

2.nodeType  节点类型

3.nodeName  节点名称

4.nodeValue   节点值

二.节点查找

1.找儿子

    1.children                  所有的子元素

    2.firstElementChild    最后一个子元素

    3.lastElementChild    最后一个子元素

    4.children()[n]              第n个子元素

2.找兄弟

    1.nextElementSibling        下一个元素

    2.previousElementSibling  上一个元素

3.找父亲 parentNode

 

三.添加节点

1.appendChild

    子元素的最后面拼接一个新的子元素

    结构:父元素.appendChild(新元素)

2.insertBefore

    插入一个新节点在某元素的前面

    结构 :  父元素.insertBefore(新元素,参考元素)

四.克隆节点cloneNode

结构 : 节点.cloneNode(deep)

deep : 是否深复制,是布尔类型的

        true:深复制   拷贝的包括内容

        false: 浅复制,只克隆当前标签,不复制内容

五.创建节点 

1. document.write()

2. innerHTML  偶尔用

3.  document.createElement(标签名)

六.删除节点 removeChild

结构:  父元素 removeChild(子节点)

注意点 : 1.  querySelementAll()  静态的,就是不包含后来添加的

              2.  getElementsByTagName   动态计算的,配合i--

              3.children  动态计算的   配合i--

七.替换节点  replaceChild

结构:父元素.replaceChild(新元素,老元素)