search

博客列表 >1. 实例演示dom增删改的常用方法 2. 改写留言板案例, 添加自定义样式

1. 实例演示dom增删改的常用方法 2. 改写留言板案例, 添加自定义样式

P粉314265155
P粉314265155原创
2022年07月28日 11:43:58327浏览

DOM增删改

  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>
  12.     <script>
  13. // 创建元素document.createElement
  15. const ul =  document.createElement('ul');
  16. // 添加ul内部元素  append  追加元素  追加内容
  17. document.body.append(ul);
  18. // 在ul内添加多个li  
  19. // 方法一
  20. for(let i = 0 ; i < 5 ; i++){
  21.     const li = document.createElement('li');
  22.     //  给 li给元素 添加内容  注是括弧里面（i+1）
  23.     li.append('item-'+(i+1));
  24.     // 在ul内添加li
  25.     ul.append(li);
  26. }
  27. console.log(ul);
  28. console.log('================');
  29. // 在某个节点之前插入  before
  30. // 创建li 元素
  31. const li = document.createElement('li');
  32. // （'new item'） 添加新的节点 注意括弧；里面的单引号
  33. // li 元素 里面添加内容
  34. li.append('new item');
  35. li.style.color ='red';
  36. // 在某个元素之前插入，先获取这个元素
  37. // 采用伪类获取
  38. const itm = ul.querySelector('li:nth-of-type(3)')
  39. // 在获取的元素之前插入新的元素
  40. itm.before(li);
  41. // 在获取的元素之后插入新的元素
  42. // 1、克隆 方法  clon     clonNode  克隆节点
  43. // 克隆新节点  注意 如果后面（ture） 是，带着节点内容克隆的，否则只克隆节点元素
  44. let newnode = li.cloneNode(true);
  45. // 在某个节点之后插入
  46. itm.after(newnode);
  49. // 在某个节点  元素 之前之后添加      insertAdjacentElement
  50. // begin 表示开始标签、 end标识结束标签
  51. // beforebegin   afterbegin   beforeend afterend
  53. ul.style.border  = ' 2px solid red  ';
  54. // 在UL列表前面增加标题
  55. const h3 = document.createElement('h3');
  56. h3.append('商品');
  57. // 开始标签之前插入
  58. ul.insertAdjacentElement('beforebegin',h3);
  59. // 开始标签之后插入并且插入样式
  60. ul.insertAdjacentHTML('beforebegin','<li style = "color:red">之后插入</li>');
  61. // 结束标签之前
  62. ul.insertAdjacentHTML('beforeend','<li style = "color:red">之后插入</li>');
  63. ul.insertAdjacentHTML('beforeend','<h3>你好</h3>');
  65. // 元素替换
  66. // replaceChild()  在父元素调用
  67. // parentNode.replaceChild(  新节点，被替换的节点)
  69. const lastNode = ul.querySelector('li:last-of-type');
  70. const link = document.createElement('a');
  71. link.href = 'http://www.baidu.com';
  72. link.append('百度');
  73. ul.replaceChild(link,lastNode);
  76. // remove   移除
  77. // 移除第一个节点
  78. ul.firstElementChild.remove;
  79. // 移除最后一个节点
  80. ul.lastElementChild.remove;
  81. // 移除某一个节点
  82. // 移除第二个
  83. ul.querySelector('li:nth-of-type(2)').remove
  84.     </script>
  86. </body>
  87. </html>
效果

jsd的操作效果

  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>js的操作内容</title>
  8. </head>
  9. <body>
  10.     <!-- 你好就是内容    内容就是文本 -->
  11.     <!-- <h2>你好</h2> -->
  12. <div class="box">
  13.     <style>
  14.         h2 {
  15.             color: aqua;
  16.         }
  17.     </style>
  18.     <h2>通知</h2>
  19.     <!-- display:none  不可见、 -->
  20.     <span style="display: none"> 注意</span>
  21.     <p>下雨</p>
  23. </div>
  24. <script> 
  25. //    1、textContent()    首选
  26. // 返回所有内容，包括 css  style  display  内容
  27. const box = document.querySelector('.box')
  28. console.log( '%c'+box.textContent, 'color:red');
  29. //    2、innerText()  只输出文本 ，css、style  display  内容 不输出
  30. console.log( '%c'+box.innerText, 'color:blue');
  31. //    3、innerHTML()   与 textContent()    相比只 展示标签，带着标签  次选
  32. console.log( '%c'+box.innerHTML, 'color:red');
  33. // 举例
  35. let p = document.createElement('p');
  37. let ul ='<a href = "http://www.baidu.com">百度</a>'
  39. p.innerText =ul;
  40. box.append(p);
  41. // 对象
  42. console.log( box);
  43. //     4、outerHtml()  返回当前包裹当前元素字符串，也就是源代码  不能用json传递
  44. console.log( '%c'+box.outerHTML, 'color:blue');
  46. // 替换  内容
  47. // box.outerHTML = '<h3 style = "color:red">hello</h3>';
  48. // 删除：给一个null相当于删除
  49. // box.outerHTML = null ;
  51. </script>
  53. </body>
  54. </html>
效果

留言板

  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案例:留言板  toDoList 留言板</title>
  8. </head>
  9. <body>
  10.     <!-- placeholder="请输入留言"  提示文字     自动获取焦点autofocus -->
  11.     <!-- onkeydown=""   事件，当键盘按下时触发  this把当前元素 input传入 -->
  12.     <input type="text"   onkeydown="addMsg(this)"  placeholder="请输入留言"  autofocus>
  13. <ul class="list"></ul>
  14.    <script>
  15.     function addMsg(anjian) {
  16.    console.log(anjian);
  17.     //   事件方法 中有一个对象，表示当前事件：event    按键盘的事件
  18.     console.log(event);
  19. // 按键类型  keytype
  20. console.log(event.type);
  21. // 获取当前按键的信息  即按 键盘哪个键
  22. console.log(event.key);
  24. // 判断用户是否提交留言，且 是否按下回车键
  26. if(event.key =='Enter'){
  27.     // 第一步、留言是否为空
  28.     if(anjian.value.length  ==0) {
  29.         alert ('留言不能为空');
  30.     //   重置焦点
  31.         anjian.focus;
  32.         return fsale;
  33.     }else{
  34.         // 添加留言输出控制台
  35.         console.log(anjian.value);
  36.         const li =document.createElement('li')
  37.       li.append(anjian.value);
  38.     // 2\  添加到文档  ,且当前插入位置为 依次插入，有问题的
  39.     //   document.querySelector('.list').append(li);
  40.     //2.1 应该最后输入的插到最开始位置  注意 如果最开始 的值null 会报错，需要做个判断
  41.     // document.querySelector('.list').firstElementChild.append(li);
  42. //    2.2 判断是否已有第一个元素
  43.  const ul = document.querySelector('.list');
  44. //  if (ul.firstElementChild != null ){
  45. //     ul.firstElementChild.before(li);
  46. //  }
  47. // else{
  48. //     ul.append(li);
  49. //  }
  50. //  以上简化版
  51. // 注意括弧里面是  逗号
  53. // 进一步简化    就可以省略
  54. // console.log(anjian.value);
  55. //         const li =document.createElement('li')
  56. // ul.insertAdjacentHTML('after','<li>${anjian.value}</li>');
  57. // 为每条留言添加删除功能    并且增加事件
  58. // ele.value = ele.value + '<button onclick="del(this.parentNode)">删除</button>';
  59. anjian.value= anjian.value + '<button onclick= "del(this.parentNode)">删除</button>';
  60. ul.insertAdjacentHTML('afterbegin' , `<li>${anjian.value}</li>`);
  61. // ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`);
  62. //  3\  清空输入框
  63.     anjian.value =null;
  64.     }
  65. // 删除功能
  67. }
  69.     }
  70.     function  del(anjian){
  71.     console.log(anjian);
  73.     // anjian.remove()
  74.     // 增加判断
  75.     if (confirm('是否删除')){
  76.         anjian.remove()
  77.     }
  78.     // 简化  三元运算
  79.     // confirm('是否删除')?anjian.remove():false;
  80.     // 另一方式
  81.     // return confirm('是否删除?') ? (anjian.outerHTML = null) : false;
  84. }
  85.    </script>
  89. </body>
  90. </html>
效果

自定义属性对象dataset

  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>自定义属性对象dataset</title>
  8. </head>
  9. <body>
  10.    <!--
  11.     1、预定义属性  id  class  title   官方的
  13.    2、 自定义 ：data-
  14.  -->
  15.     <div class="btn-group">
  16.         <!-- 将每个按钮的索引 保存到一个自定义属性，方便用户操作 -->
  17.           <!-- 添加事件 -->
  18.         <!-- 此处 index 省略了dataset-   前缀 -->
  19.         <button data-index="1" onclick="console.log(this.dataset.index);">btn1</button>
  20.      <button data-index="2"   onclick="console.log(this.dataset.index);" >btn2</button>
  21.      <button data-index="3"  onclick="console.log(this.dataset.index);">btn3</button>
  22.      <div  class = "my" data-my-email="123456@qq.com"> 我的邮箱</div>
  23.     </div>
  25. <script>
  26.    const div =document.querySelector ('.my');
  27.    console.log(div);
  28. //    注意 my-email  转为驼峰式
  29.    console.log(div.dataset.myEmail);
  30. </script>
  32. </body>
  33. </html>
效果

js操作css

  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>js操作css</title>
  8.     <style>
  9.         /* 文档内部样式 */
  10.        div  {
  11.   width: 100px;
  12.   height:  200px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div style="color: red;  background-color: blue;"> Hello</div>
  19.     <script>
  20.         // 获取元素样式  
  21.         const div = document.querySelector('div');
  22.     //    行内样式  获取不到文档内部样式 
  23.         console.log(div.style,div.style.backgroundColor);
  25. // 一个元素的最终样式，有外部，内部行内多种级别多个来源确定，所以叫计算样式
  26. // getComputedStyle   因为 只读 所以只能通过行内style  来更新
  27. console.log(window.getComputedStyle(div).width);
  28. console.log('========');
  29. // window  全局对象
  30. console.log(window);
  31. console.log('========');
  32. console.log(document.defaultView);
  33. console.log('========');
  34. // parseFloat    parseInt   字符转换。就把 获取的100px  变为 100
  36. let width = window.getComputedStyle(div).width
  37. width =  parseInt (width);
  38. console.log(width);
  39. div.style.width = width + 200 +'px  ';
  40.     </script>
  41.         <!-- <iframe src="" frameborder="0"></iframe>  添加画中画 -->
  42.     <!-- <iframe src="" frameborder="0"></iframe> -->
  43. </body>
  44. </html>
效果

上一条：js中的数据类型、分支与循环下一条：使用APICloud AVM框架封装SKU（商品规格选择）组件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多