search

博客列表 >0106-dom元素的常用方法，dom元素的增删改查

0106-dom元素的常用方法，dom元素的增删改查

世纪天城
世纪天城原创
2021年01月20日 22:52:54577浏览

构造函数和原型

构造函数是生成对象的模板，一个构造函数可以生成多个对象

原型链的特点有：读取对象的某个属性时，先寻找对象本身的属性，如果找不到，就到它的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。

任何一个函数都有一个原型属性: prototype

  1.     function f1() {}
  2.     //用console.dir(f1)在控制台查看
  3.     console.dir(f1);

用console.dir(f1)在控制台查看
![](https://img.php.cn/upload/image/947/718/445/1611147268818203.png

prototype对于普通函数没用,对构造函数来说才有用
构造函数是”对象工厂”,是用来创建对象的
对象也叫”实例”, 实例: 实际案例
js中没有“类”的概念,它是基于原型的语言,所以可简单的将构造函数当成“类”
构造函数必须使用“new”来调用,普通函数不用
new 的过程就是类的实例化过程,就是创建一个对象的过程
创建对象的过程,就叫“类的实例化”

构造函数

function User(name, email) {
// 1. 创建出一个新对象,用this来表示(伪代码,系统自动创建并执行)
// const this = new User;

  1.             // 2.初始化对象,给这个对象添加一个自定义属性,用来和其它实例进行区分
  2.             this.name = name;
  3.             this.email = email;
  5.             // 3. 返回这个对象
  6.             return this;
  7.         }
  8.         const user = new User("admin", "admin@php.cn");
  9.         console.log(user);

可以用instanceof来看看是不是user对象的实例 是返回true 否则返回false;
console.log(user instanceof User);

我们可以给原型属性设置自定义属性与其他当前对象的其他实例共享

  1.         user.__proto__.salary = 8899;
  2.         console.log(user.salary);

实例的原型永远指向它的构造函数的原型,实例的原型从构造函数的原型继承成员(属性/方法)
需要被所有类实例共享的成员,应该写到构造函数的原型上

  1.         User.prototype.nation = "CHINA";
  2.         console.log(user.nation, user1.nation);

这样user，user1这两个实例都能继承到当前对象的原型属性里的nation属性

属性通常不应该共享的,它是区分不同对象的标志,方法更适合共享

  1.         User.prototype.show = function () {
  2.             return { name: this.name, email: this.email, salary: this.salary };
  3.           };
  4.           console.log(user.show());
  5.           console.log(user1.show());

dom元素的常用方法

使用css选择器是最直观的

  1. 获取满足条件的所有元素
  1.     <script>
  2.         const lis = document.querySelectorAll("#ul li");
  3.         console.log(lis);
  4.     </script>

querySelectorAll返回的Nodelist是浏览器内置的集合类型,属性类数组

用Array.from()和 …rest,都可以转为真正的数组

  1.     <script>
  2.         const lis = document.querySelectorAll("#ul li");
  3.         console.log(lis);
  4.         let lisArr = Array.from(lis);
  5.         console.log(lisArr);
  6.         let larr = [...lis];
  7.         console.log(larr);
  8.     </script>

Nodelist可以直接用forEach()遍历

  1.     <script>
  2.         const lis = document.querySelectorAll("#ul li");
  3.         lis.forEach(item => console.log(item));
  4.     </script>

注：哪怕只获取到一个,但返回的仍然是一个集合

有几个快捷方式,用来快速 获取某一个或某一类元素

分别拿到head，body，title元素

  1.     <script>
  2.         // head
  3.         console.log(document.head);
  4.         // body
  5.         console.log(document.body);
  6.         // title
  7.         console.log(document.title);
  8.         // 拿到所有图片
  9.         console.log(document.images);
  10.     </script>

表单元素

  1.       <script>
  2.             //   表单元素
  3.             // forms
  4.             console.log(document.forms);//这里返回的表单元素的集合
  5.             // 拿到某一个表单元素
  6.             console.log(document.forms[0]);
  7.       </script>

dom元素的增删改查常用操作

为列表添加一个新的li元素

  1.         <script>
  2.             const ul = document.querySelector("#list");
  3.             console.log(ul);
  4.             // 1. 创建元素
  5.             const li = document.createElement("li");
  6.             // parent.appendChild(newEl),添加到页面
  7.             ul.appendChild(li);
  8.          </script>

图例：

innerText为li元素添加文本

  1.         <script>
  2.               const ul = document.querySelector("#list");
  3.               console.log(ul);
  4.               // 1. 创建元素
  5.               const li = document.createElement("li");
  6.               // parent.appendChild(newEl),添加到页面
  7.               ul.appendChild(li);
  8.               li.innerText = "item6";
  9.         </script>

图例：


innerHTML为li元素添加文本并解析为html元素

  1.         <script>
  2.               const ul = document.querySelector("#list");
  3.               console.log(ul);
  4.               // 1. 创建元素
  5.               const li = document.createElement("li");
  6.               // parent.appendChild(newEl),添加到页面
  7.               ul.appendChild(li);
  8.               // innerHTML为li元素添加文本并解析为html元素
  9.               li.innerHTML = '<i style="color:red">item6</i>';
  10.         </script>

图例：

insertAdjacentHTML()将html字符串直接解析为dom元素

  1.         <script>
  2.               let htmlStr = "<li style='color:red'>item7</li>";
  3.               // 将html字符串直接解析为dom元素
  4.               ul.insertAdjacentHTML("beforeEnd", htmlStr);
  5.         </script>

图例：

如果大量添加元素应该使用文档片断完成

createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。

  1.         <script>
  2.               const ul =document.querySelector('.ul');
  3.               const frag = document.createDocumentFragment();
  4.               //const frag = new DocumentFragment() === document.createDocumentFragment() 等同;
  5.               for(i=0;i<5;i++){
  6.                     // 创建li元素
  7.                     let li = document.createElement('li'); 
  8.                     // 添加文本
  9.                     li.innerText = 'a'+i++;
  10.                     // 将生成的节点先临时挂载到文档片断中
  11.                     frag.appendChild(li);
  12.               }
  14.               ul.appendChild(frag);
  15.         </script>

图例：

  1. 更新

123

replaceChild() 方法用新节点替换某个子节点。
这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

语法：
node.replaceChild(newnode,oldnode)
newnode为必需。您希望插入的节点对象。
oldnode为必需。您希望删除的节点对象。

  1.         <script>
  2.               let h3  =document.createElement('h3');
  3.               h3.innerHTML = "晚上好";
  4.               let div1 = document.querySelector('#div1');
  5.               console.log(div1);
  6.               let p1 = document.querySelector('#p1');
  7.                div1.replaceChild(h3,p1);
  8.          </script>

实例：
将p标签更新为h3

3.移除

  1.         <script>
  2.               let ul = document.querySelector('#div1')
  3.               div1.removeChild(document.querySelector("#p1"));
  4.         </script>

遍历查询 快捷指令

  1.         <script>
  2.               // 4. 遍历查询
  3.              let ul = document.querySelector('#ul2');
  4.              // 获取所有子元素
  5.              console.log(ul.children);
  6.              // 获取子元素数量
  7.              console.log(ul.children.length);
  8.              console.log(ul.childElementCount);
  9.              // 第一个子元素
  10.              console.log(ul.firstElementChild);
  11.              // 最后一个
  12.              console.log(ul.lastElementChild);
  13.              // 父节点
  14.              console.log(ul.lastElementChild.parentElement);
  15.              // 前一个兄弟
  16.              const jiu = document.querySelector("#ul2 li:nth-of-type(3)");
  17.              console.log(jiu);
  18.              console.log(jiu.previousElementSibling);
  19.              // 后一个兄弟
  20.              console.log(jiu.nextElementSibling);
  21.        </script>
上一条：简单设计案例：选项卡、图片懒加载、轮播图下一条：Vue自学：组件子传父操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多