DOM manipulation

Tonny 发布于2019-08-21 17:04 / 1453人阅读

摘要：节点有一个属性用来表示当前元素的类型，它是一个整数，元素，属性，文本结构两个节点之间可能存在哪些关系以及如何在节点之间任意移动。但是和是符合标准的，可以说比较通用。

DOM manipulation

DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，它是一个整数：

Element，元素

Attribute，属性

Text，文本

DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

当前对象为node

返回父节点：node.parentNode, node.parendElement,

返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children

返回第一个子节点：node.firstChild

返回最后一个子节点： node.lastChild

返回同属上一个子节点：node.nextSibling

返回同属下一个子节点：node.previousSibling

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 ,所以大家只要记得有parentElement和children就行了
移位 -> http://www.cnblogs.com/QingFl...

DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

// 添加、删除子元素

ele.appendChild(el);

ele.removeChild(el);

// 替换子元素

ele.replaceChild(el1, el2);

// 插入子元素

parentElement.insertBefore(newElement, referenceElement);

//克隆元素

ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点

childNodes vs children 返回所有子节点：

node.childNodes（包含文本节点及标签节点）,

node.children

Element.children returns only element children(元素节点), while Node.childNodes returns all node children. Note that elements are nodes, so both are available on elements.（node节点包括element 节点）

getElementsByClassName(H5) compatible version

function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(classname);
  } else {
    var results = new Array();
    var elems = node.getElementsByTagName("*");
    for (var i = 0; i < elems.length; i++) {
      if (elems[i].className.indexOf(classname) != -1) {
        result.push(elems[i]);
      }
    }
    return results;
  }
}

私有云海外云主机 manipulation bit-manipulation DOM dom0和dom2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89102.html

Licia：最全最实用的 JavaScript 工具库

摘要：为了避免不同项目之间进行复制粘贴，可以将这些常用的函数封装到一起并发布包。目前所包含模块已达三百个，基本可以满足前端的日常工发需求。二使用打包工具该项目自带打包工具，可以通过配置文件或命令行扫描源码自动生成项目专用的工具库。前言在业务开发过程中，我们经常会重复使用日期格式化、cookie 操作、模板、浏览器判断、类型判断等功能。为了避免不同项目之间进行复制粘贴，可以将这些常用的函数...

luxixing 2019-08-22 17:00 评论0 收藏0
Awesome JavaScript

摘要： Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Testing Frameworks QA Tools MVC Framew...

endless_road 2019-08-22 10:56 评论0 收藏0
VueJS源码学习——元素在插入和移出 dom 时的过渡逻辑

摘要：原文地址项目地址关于中使用效果，官网上的解释如下当元素插入到树或者从树中移除的时候，属性提供变换的效果，可以使用来定义变化效果，也可以使用来定义首先第一个函数是将元素插入，函数实现调用了实现代码如下写的好的代码就是文档，从注释和命名上就 src/transition 原文地址项目地址关于 vue 中使用 transition 效果，官网上的解释如下： With Vue.js’ tra...

Dogee 2019-08-21 16:18 评论0 收藏0
Ajax局部页面刷新和History API结合的陷阱

摘要：对于那些老网站或者老项目来说全盘改造成并不现实，于是就有了局部页面刷新这个解决方案。如果不知道局部页面刷新是何物请看这里，这里和这里。但实际上，第一次后退无法还原的内容陷阱，第二次后退页面刷新了一切恢复最初的样子。 ajax在现代网站已经得到非常普遍地应用，主要的好处大家都知道（异步加载数据，不用刷新整个浏览器，更小的数据传输尺寸）。对于那些老网站或者老项目来说全盘改造成ajax并不现...

JasinYip 2019-08-20 10:14 评论0 收藏0
FastClick 源码解读

摘要：所有浏览器浏览器不支持安卓中中有属性安卓中中有属性有属性的有属性的所以在不需要的浏览器会直接掉，不会执行下面的所有代码。见源码行，可以看出在响应无操作后，则触发。其实一直就想花些时间读一读那些优秀的开源库，今天终于下了决定打算死磕下自己，2016年每个月读2-3个优秀的开源库，把源码精彩的地方和自己心得分享给大家。目录（一）背景（二）源码解析（三）Zepto 点击穿透与 Fast...

Chaz 2019-08-19 17:24 评论0 收藏0