DOM的节点操作

DOM的节点操作

节点操作

1.DOM节点

• DOM树里面的每一个内容都称为节点

节点类型

​ 元素节点 (各类标签)

​ 1.所有的标签,比如: body, div

​ 2.html是根节点

​ 属性节点 (class属性)

​ 1.所有的属性,比如: href

​ 文本节点 (标签里的文字)

​ 1.所有的文本

查找节点

节点关系: 父节点, 子节点, 兄弟节点

父节点查找:

1. parenNode属性
2. 返回最近一级的父节点,找不到就返回null

语法:

子元素.parenrNode

例子:

<div class='father'>
    </div class='son'>儿子<div>
</div>
<script>l
let son = document.querySelector('.son')
son.parentNode.style = ....
//找上一级父亲,不用在获取父元素了
</script>

子节点查找

​ childNodes

​ 获取所有子节点, 包括文本节点(空格 ,换行) ,注释等

​ children

​ 仅获取所有元素的节点

​ 返回的是一个伪数组

​ 语法:

父元素.children 

兄弟关系查找

1. 下一个兄弟节点

   nexElementSibling属性

2. 上一个兄弟节点

   previouElementSibling属性

增加节点

1.创建节点

创建一个新的节点

把创建的新节点放入到指定的元素内部

语法:

document.createElement('标签名')
//创建一个新的元素节点

2.追加节点

插入到父元素的最后一个子元素

语法

父元素.appendChild(要出人的元素)

式例:

<ul>
   <li>1号li<li>
    </ul>
<script>
    //获取ul
    let ul = document.querySelector('ul')
   // 创建新节点li
	let li = document.createElement('li') 
    li.innerHTML = '2号li
    // 追加到ul里面
    ul.appenchild(li)
// 打印 结果
//1号li
//2号li
 </script>

插入到父元素中某个子元素的前面

 父元素.insertBefore(要出人的元素,在那个元素的前面)

式例

<ul>
   <li>1号li<li>
    </ul>
<script>
    //获取ul
    let ul = document.querySelector('ul')
   // 创建新节点li
	let li = document.createElement('li') 
    li.innerHTML = '0号li
    // 追加到ul里面
    ul.insertBefore(li)
// 打印 结果
//10号li
//1号li
 </script>

3.克隆节点

复制一个原有的节点

把复制的节点放入到指定的元素内部

语法:

//克隆一个已有的元素 节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值

1. 若为true,则代表克隆时会包含后代节点一起克隆
2. 若为false,则代表克隆时不包含后代节点
3. 默认为false

删除节点

若一个节点在页面中不需要了,删除它,在js原生DOM操作中,删除元素必须要通过父元素删除

语法:

父元素.removChild(要删除的元素)

注意:

• 不存在父子关系则删除不成功
• 删除节点和隐藏节点(display: none) 区别: 隐藏节点还是存在,但是删除节点,则是从html中删除掉

式例:

<ul>
<li>我是小li</li>
</ul>
<script>
//获取ul元素
let ul = document.querySelector('ul')
//删除语法,     删除子元素,子节点第一个`
ul.removeChild(ul.children[0])
</script>