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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

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

元素的查询方法
  1.     // 获取一组元素
  2.    let item = document.querySelectorAll('.list>li');
  4.      // 获取一组元素中的第一个
  5.        item =  document.querySelector('ul>li')
元素的遍历

1 . 获取所有的子节点

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

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

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

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

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

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

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

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

  1.     //获取第五个元素节点,   list后面必须有一个空格
  2.     let five = document.querySelector('.list :nth-child(5)')
  3.     console.log(five.textContent);
  4.     //下一个节点
  5.     const next = five.nextElementSibling
  6.     // 上一个节点
  7.     const pre = five.previousElementSibling
  8.      //父元素
  9.     let parent = five.parentElement
  10.      //是否是后代
  11.     console.log(parent.contains(pre));
元素的增删改

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

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

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

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

3 . 克隆

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

4 . 替换(更新)

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

5 . 删除

  1.     //移除元素(删除)
  2.     //  h2.remove()
  3.       ul.lastElementChild.remove()
内容替换
  • 替换元素的内容
  1.     // 替换掉子元素里面的内容
  2.         // document.querySelector('.box').innerHTML = '拜拜'
  3.         //替换元素自身
  4.         document.querySelector('.box').outerHTML ='拜拜'
  • 在元素的指定位置添加元素
  1.       // 插入到ul尾部标签之前
  2.         ul.insertAdjacentElement('beforeend',h3)
  3.         //插入到尾部标签之后
  4.         ul.insertAdjacentElement('afterend',h4)
  5.         //插入到ul标签之前
  6.         ul.insertAdjacentElement('beforebegin',h1)
  7.         //插入到ul标签首标签之后
  8.         ul.insertAdjacentElement('afterbegin',h2)
  9.         //在指定位置插入元素节点(一段html代码)
  10.         ul.insertAdjacentHTML('afterend','<button>提交信息</button>')

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

【文章原创作者：国外高防服务器 http://www.558idc.com/shsgf.html转载请说明出处】
更多阅读