search

博客列表 >dom的增删改查

dom的增删改查

冰雪琉璃
冰雪琉璃原创
2021年04月20日 17:04:05456浏览

类数组含义

  • 类似于数组，但是是对象

    特征

    1.有length属性值
    2.有递增的正整数索引
    3.Array.from()可以将类数组转化为真正的数组
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>类数组</title>
    8. </head>
    9. <body>
    10. <script>
    11. const  brand={
    12. 0:"H",
    13. 1:"U",
    14. 2:"R",
    15. },
    16. console.log(brand);
    17. console.log(brand.length);//3
    18. console.log(brand[0],brand[1],brand[2],brand[3],brand[4]);//H,U,R
    19. console.log(Array.isArray(brand));//false
    20. console.log(brand instanceof Object);//true
    21. let arr1=Array.from(brand);
    22. console.log(Array.isArray(arr1));//true
    23. arr1.push("P");
    24. console.log(arr1)//H,U,R,P
    25. </script>
    26. </body>

    类数组遍历

    1.方法：forEach();
    2.参数(item, index,items)
  • item表示正在遍历当前元素，必选
  • index:当前元素的索引
  • itmes:当前遍历的数组对象
    3.实例
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>类数组</title>
    8. </head>
    9. <body>
    10.   <ul class="list">
    11.   <li class="item">item1</li>
    12.   <li class="item">item2</li>
    13.   <li class="item">item3</li>
    14.   <li class="item">item4</li>
    15.   <li class="item">item5</li>
    16. </ul>
    17. <script>
    18. //获取所有满足条件的元素集合
    19.    const items=document.querySelectorAll(".list .item");
    20.    items.forEach(function (item, index,items){
    21.          console.log(item,index, items);
    22. });
    23. //箭头函数简化
    24. items.forEach(item)=>console.log(item);
    25. </script>
    26. </body>
    27. </html>

    获取元素的方法

    1.document.querySelector()
    2.document.querySelectorAll()
    3.querySelector()总是返回唯一的元素，常用于id
    4.querySelectorAll(),querySelector()，也可以用在元素上
    5.querySelectorAll()返回一组元素。

    快速获取一个元素的特定方法

    document.body();获取body
    document.title();获取标题
    document.heade();获取头部
    document.documentElement();获取html

    表单的获取方式

    1.document.forms
    2.document.forms[0]
    3.document.forms[表单中的name属性值]
    4.document.forms[表单中的id属性值]
    5.document.forms.id(常用方法)

    实例

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>表单获取方式</title>
    8. </head>
    9. <body>
    10. <form action=""name="hello" id="formId">
    11. <input type="text" placeholder="请输入emial"/>
    12. <button>提交<button>
    13. </form>
    14. <script>
    15. console.log(document.forms);
    16. console.log(document.forms[0]);
    17. console.log(document.forms[hello]);
    18. console.log(document.forms[forms]);
    19. console.log(document.forms.item[0]);
    20. console.log(document.forms.item("hello"));
    21. console.log(document.forms.item("formId"));
    22. //常用方法forms.id
    23. console.log(document.forms.formId);
    24. </script>
    25. </body>
    26. </html>

    dom树的遍历以及常用的方法

    1.childNodes返回所有的元素文本，文档，属性
    2.children只返回元素类型的节点
    3.firstElementChild获取第一个子元素
    4.lastElementChild获取最后一个子元素
    5.nextElementSibling获取参考元素的下一个兄弟节点
    6.previousElementSibling获取参考元素的前一个兄弟节点
    7.childElementCount可以获取一个数组的个数，相当于length属性

    实例

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>类数组</title>
    8. </head>
    9. <body>
    10.   <ul class="list">
    11.   <li class="item">item1</li>
    12.   <li class="item">item2</li>
    13.   <li class="item">item3</li>
    14.   <li class="item">item4</li>
    15.   <li class="item">item5</li>
    16. </ul>
    17. <script>
    18. let list=document.querySelector(".list");
    19. let lis=list.querySelectorAll(".item");
    20. console.log(lis);
    21. //NodeList自带了一个for-of迭代器接口。
    22. for(let item of lis){
    23. console.log(item);//item当前元素
    24. }
    25. </script>
    26. </body>
    27. </html>

    dom元素的内容

    1.textContent向指定的元素中添加内容
    2.innerHTML向指定的元素中添加html字符串
    3.outHTML使用当前的文本将原来的文本替换掉

    实例

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>dom元素的内容</title>
    8. </head>
    9. <body>
    10. <div class="box">
    11.  <p></p>
    12.  </div>
    13.  <script>
    14.  const p=document.querySelector("p");
    15. const div=document.querySelector("div");
    16. //textContent添加文本
    17. p.textContent="我是p元素";
    18. //html字符串
    19. div.html="<em>我是div元素可以带有标签</em>"
    20. //如果想把html中的内容渲染出来，应该使用innerHtml方法
    21. console.log(div.innerHTML)//我是div元素可以带有标签
    22. //outHTML使用当前的文本将原来的文本替换掉
    23. p.outHTML="<em style="color:red">php.cn</em>"
    24. console.log(p)//<em style="color:red">php.cn</em>
    25.  </script>
    26. </body>
    27. </html>

    dom的增删改查

    1.增加,创建元素方法
  • append()
  • prepend()
  • document.creatElement()
  • before()
  • after()
    2.含义
  • append()将父元素作为参数，在尾部添加新元素
  • prepend()将父元素作为参数，在头部添加新元素
  • document.creatElement()创建新元素
  • before()在参考点上调用，表示在参考点之前添加新节点。
  • after()在参考点上调用，表示在参考点之后添加新节点。
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>dom元素的增加</title>
    8. </head>
    9. <body>
    10. <ul class="list">
    11.   <li class="item">item1</li>
    12.   <li class="item">item2</li>
    13.   <li class="item">item3</li>
    14.   <li class="item">item4</li>
    15.   <li class="item">item5</li>
    16. </ul>
    17. <script>
    18. let div=document.creatElement("div");
    19. let span=document.creatElement("span");
    20. span.textContent="hello";
    21. div.append(span);
    22. div.append(span,"world");
    23. console.log(div);
    24. //append创建一个列表
    25. const ul=document.creatElement("ul");
    26. //循环生成多个li列表
    27. for(let i=1;i<=5;i++){
    28. let li=document.creatElement("li");
    29. li.textContent=`item${i}`;
    30. ul.append(li);
    31. };
    32. document.body.append(ul);//添加到body中
    33. //获取第四个li元素
    34. const referNode=document.querySelector(" ul li:nth-of-type(4)");
    35. //在它之前添加新节点
    36. li=document.creatElement("li");
    37. li.textContent="在它之前添加一个元素li";
    38. li.style.backgroundColor="red";
    39. //referNode.before(),在参考点上调用，表示在参考点之前添加新节点。
    40. referNode.before(li);
    41. //referNode.after(),也是在参考点上调用，表示在参考点之后添加新节点
    42. referNode.after(li);
    43. </script>
    44. </body>
    45. </html>
    2.dom删除方法
  • remove()
    3.语法：选中元素。remove();
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>dom元素的增加</title>
    8. </head>
    9. <body>
    10. <ul class="list">
    11.   <li class="item">item1</li>
    12.   <li class="item">item2</li>
    13.   <li class="item">item3</li>
    14.   <li class="item">item4</li>
    15.   <li class="item">item5</li>
    16. </ul>
    17. <script>
    18. //删除第一个li
    19. ul.querySelector("ul li:nth-of-type(1)").remove();
    20. </script>
    21. </body>
    22. </html>
    3.dom的修改
    1.方法：
  • replaceWidth()
  • 旧的节点.replaceWidth(新节点)
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>dom元素的增加</title>
    8. </head>
    9. <body>
    10. <ul class="list">
    11.   <li class="item">item1</li>
    12.   <li class="item">item2</li>
    13.   <li class="item">item3</li>
    14.   <li class="item">item4</li>
    15.   <li class="item">item5</li>
    16. </ul>
    17. <script>
    18. //将最后一个节点用链接替换
    19. let lastItem=document.querySelector("ul li:last-of-type");
    20. let a=document.creatElement("a");
    21. a.textContent="php中文网";
    22. a.href="https://php.cn";
    23. lastItem.replaceWidth(a);
    24. </script>
    25. </body>
    26. </html>
    4.dom的查找
  • 方法
  • innerHTML()

    补充

    1. insertAdjacentElement(“插入位置”,元素);在参考点上调用
    2. 插入位置：afterBegin,beforeBegin,beforeEnd,afterEnd
    3. afterBegin:开始标签之后第一个子元素
    4. beforeBegin:开始标签之前，是参考点的前一个兄弟元素
    5. beforeEnd:结束标签之前，参考点的最后一个子元素
    6. 将li新元素添加到起始标签之后

      类操作

      1. <!DOCTYPE html>
      2. <html lang="zh-CN">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>css操作</title>
      8. <style>
      9. .bag-color{
      10. background-color:red;
      11. }
      12. .bag-colorTwo{
      13. background-color:blue;
      14. }
      15. .bag-colorThree{
      16. background-color:skyblue;
      17. }
      18. </style>
      19. </head>
      20. <body>
      21. <p>hello world</p>
      22. <script>
      23. //行内样式
      24. const p=document.querySelector("p");
      25. p.style.color="green";
      26. constructor(p);
      27. //类样式
      28. const p=document.querySelector("p");
      29. //向p元素动态的添加style标签中的样式
      30. p.classList.add("bag-color");
      31. //删除上述添加的样式
      32. p.classList.remove("bag-color");
      33. //切换样式
      34. p.classList.toggle("bag-color");
      35. //替换样式replace("之前的样式","之后的样式")
      36. p.classList.replalce("bag-color","bag-colorThree");
      37. //计算样式：只读
      38. //参数(要查看样式的元素,伪元素)
      39. let styleP=window.getComputedStyle(p,null);
      40. //查看p元素的高度
      41. console.log(styleP.getPropertyValue('height'));
      42. //查看p元素的背景色
      43. console.log(styleP.getPropertyValue("background-color"));
      44. </script>
      45. </body>
      46. </html>
上一条：ExFat文件系统文件误删除. 不知道如何找回呢？下一条：js 轮播图功能：上下翻页，自动播放----0409
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多