元素的查询,遍历和增删改,插入等操作.

通过3月27日晚学习,基本了解老师课堂上讲的JS的DOM操作.

元素的查询方法

    // 获取一组元素
   let item = document.querySelectorAll('.list>li');
     // 获取一组元素中的第一个
       item =  document.querySelector('ul>li')

元素的遍历

1 . 获取所有的子节点

 //1. 获取所有的子节点(返回所有类型的子节点,包括空格回车等)
    let list = document.querySelector('.list')
    let lists = list.childNodes

2 . children:仅返回元素类的节点

/2. children:仅返回元素类的节点
    list = document.querySelector('.list')
    lists = list.children

3 . 返回第一个元素节点的值

  //返回第一个元素节点的值
  console.log(list.firstElementChild.textContent);

4 . 返回最后一个元素节点的值

//返回最后一个元素节点的值
console.log(list.lastElementChild.textContent);

5 . 获取第五个元素节点,获取第五个的上一个节点,下一个节点,及其父元素节点

    //获取第五个元素节点,   list后面必须有一个空格
    let five = document.querySelector('.list :nth-child(5)')
    console.log(five.textContent);
    //下一个节点
    const next = five.nextElementSibling
    // 上一个节点
    const pre = five.previousElementSibling
     //父元素
    let parent = five.parentElement
     //是否是后代
    console.log(parent.contains(pre));

元素的增删改

1 . 创建元素,添加元素,添加片段

//  1. 创建元素  createElement
  const ul = document.createElement('ul')
//   2. 创建元素后,添加到页面body里   append
  document.body.append(ul)
//3. 添加片段
   let frag = document.createDocumentFragment()
    for(let i=0;i<5;i++)
    {
        const li = document.createElement('li')
        li.append('item'+(i+1))
        frag.append(li)
    }
    // 一次性添加到页面中
    ul.append(frag)

2 . 添加在元素的前面和后面

//  找到第四个子元素
      const four = ul.querySelector(' :nth-child(4)')
      let li = document.createElement('li')
     li.append('添加在之前的内容')
     let li2 = document.createElement('li')
     li2.append('添加在之后的内容')
     //添加到第四个元素之前
     four.before(li)
     //添加到第四个元素之后
     four.after(li2)

3 . 克隆

 //  将第四个元素克隆,并添加到第四个元素后面
    let four_clone = four.cloneNode(true)
    four.after(four_clone)
    //  将第四个元素克隆,并添加到整个元素后面
    ul.append(four_clone)

4 . 替换(更新)

    h2 = document.createElement('h2')//创建一个元素h2
    h2.textContent = 'h2标题'    //给元素H2添加上内容
    // 将h2替换到第四个元素
    // ul.replaceChild(h2,four)
    //将h2替换掉最后一个元素
    // ul.replaceChild(h2,ul.lastElementChild)

5 . 删除

    //移除元素(删除)
    //  h2.remove()
      ul.lastElementChild.remove()

内容替换

• 替换元素的内容

    // 替换掉子元素里面的内容
        // document.querySelector('.box').innerHTML = '拜拜'
        //替换元素自身
        document.querySelector('.box').outerHTML ='拜拜'

• 在元素的指定位置添加元素

      // 插入到ul尾部标签之前
        ul.insertAdjacentElement('beforeend',h3)
        //插入到尾部标签之后
        ul.insertAdjacentElement('afterend',h4)
        //插入到ul标签之前
        ul.insertAdjacentElement('beforebegin',h1)
        //插入到ul标签首标签之后
        ul.insertAdjacentElement('afterbegin',h2)
        //在指定位置插入元素节点(一段html代码)
        ul.insertAdjacentHTML('afterend','<button>提交信息</button>')

通过实际操作,基本熟悉元素的查询,遍历和增删改,插入等操作.