最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

原始JS实现增删改查插

来源:懂视网 责编:小采 时间:2020-11-27 20:12:58
文档

原始JS实现增删改查插

原始JS实现增删改查插:1. 增创建元素节点 :document.createElement(p); 创建text节点 :document.createTextNodet(内容); 复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。2. 删removeC
推荐度:
导读原始JS实现增删改查插:1. 增创建元素节点 :document.createElement(p); 创建text节点 :document.createTextNodet(内容); 复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。2. 删removeC

1. 增

创建元素节点 :document.createElement(“p”); 
创建text节点 :document.createTextNodet(“内容”); 
复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。

2. 删

removeChild();//该方法不是在待删除的节点上调用,而是在它的父元素节点上调用。 
node.parentElement.removeChild(node); 
replaceChild();//删除一个子节点,并用一个新的节点取代它。第一个参数是新节点,第二个参数是要删除的节点。 
node.parentElement.replaceChild(newNode,node);

3. 改

许多时候需要对节点属性和内容进行修改。
对属性的修改
属性分为标准HTML属性和非标准的HTML属性。
* HTML属性作为Element的属性
HTML Element 定义了通用的HTTP属性,像id、标题lang和dir的属性,以及事件的处理程序属性(onclick)。特定的element子类型还有特定的属性,如img的src属性。

var oImg = document.getElementById("img1");oImg.id = "newID";oImg.className = "className";oImg.src = "...";

获取和设置非标准的HTML属性
Element定义了getAttribute和setAttribute方法来查询和设置非标准属性,hasAttribute和removeAttribute来检测命名属性是否存在和完全删除属性。

对内容的修改
innerHTML:包含标签的内容
innerText(火狐支持不好):纯文本的元素内容
textContent(IE不支持):纯文本的元素内容

4. 查

  • 一步查找到位

  • document.getElementById() 返回对拥有指定 id 的第一个对象的引用。 
    document. getElementsByClassName() 返回文档中所有指定类名的元素集合。 
    document.getElementsByName() 返回带有指定名称的对象集合。 
    document.getElementsByTagName() 返回带有指定标签名的对象集合。
  • 查找父子兄弟

  • 对于一个Node节点,包含很多种,像:Document节点、Text节点、Comment节点、Element节点,我们常常需要获得的是元素节点,忽略掉Text和Comment节点: 
    firstElementChild,lastElementChild; 
    children => 数组类型:children[0] ,第一个子节点 
    nextElementSibling,previousElementSibling => 兄弟节点 
    parentElement => 父亲节点
  • 5. 插

    Node有方法appendChild()和insertBefore()。 
    parent.appendChild(child); // 插入到最后 
    parent.insertBefore(newNode,node);//插入到node之前

    声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文档

    原始JS实现增删改查插

    原始JS实现增删改查插:1. 增创建元素节点 :document.createElement(p); 创建text节点 :document.createTextNodet(内容); 复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。2. 删removeC
    推荐度:
    标签: 查询 js 原生
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top