美文网首页
超简单自动编译sass扩展和工具

超简单自动编译sass扩展和工具

作者: 叩丁狼教育 | 来源:发表于2019-12-10 16:10 被阅读0次

本文为叩丁狼高级讲师原创文章,转载请注明出处。

在之前的文章中,学习过了DOM的访问方式,其中也把DOM相关的概念进行了学习,其实DOM的内容还有很多,所以本文将会继续学习DOM操作相关的内容,DOM操作涉及到的操作有:,而这方面的内容其实就是上一次所写的“访问方式”。

DOM的增加

DOM操作中指的是增加节点,分为两部分:创建节点插入节点

创建节点

创建节点中常用的API方法主要有:

  1. document.createElement():创建指定的HTML元素
  2. document.createTextNode():创建文本节点
  3. document.createDocumentFrame():创建文档片段
  4. document.createAttribute():创建节点属性
  5. node.cloneNode():克隆节点

插入节点###

插入节点常用的API方法主要有:

  1. node.appendChild():末尾追加一个新节点
  2. node.insertBefore():插入一个新节点
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

例子解释:

这段代码创建新的 <p>元素:

 var para=document.createElement("p");

如需向 <p>元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("这是新段落。");

然后您必须向 <p>元素追加这个文本节点:

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素:

element.appendChild(para);

关于document.createAttribute()

document.createAttribute() 方法创建并返回一个新的属性节点。但是这个方法不是很常用,如果涉及到创建属性,一般使用node.setAttribute()

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

var node = document.getElementById('div1'); 
var newAttr = document.createAttribute('title');  //创建一个新的title属性;

newAttr .nodeValue = 'Hello world!';  //title属性的值是:Hello world!
node.setAttributeNode(attr); //运用到对应的元素节点上

关于node.cloneNode()

node.cloneNode(deep) 方法返回该节点的一个副本,deep 可选,表明是否采用深度克隆,如果为true ,则该节点的所有后代节点也都会被克隆,否则,只克隆该节点本身。

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

var node = document.getElementById('div1');
var cloneNode = node.cloneNode(true); //克隆div1整个节点;

cloneNode.id = "div2"; //修改克隆的节点id名称为div2;
document.body.appendChild(cloneNode); //在网页中追加克隆的节点;

DOM的删除

DOM节点的删除主要API是node.removeChild();可以使用parentNode.removeChild(child)删除指定父节点parentNode的一个子节点child,并返回被删除的节点。

注意事项:这个方法是要在被删除的节点的父节点上调用的,而不是在被删除节点上调用的,如果参数节点不是当前节点的子节点,removeChild 方法将报错。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

例子解释:

这个 HTML 文档含有拥有两个子节点(两个<p>元素)的 <div> 元素:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

找到 id="div1"的元素:

var parent=document.getElementById("div1");

找到id="p1" 的 <p> 元素:

var child=document.getElementById("p1");

从父元素中删除子元素:

parent.removeChild(child);

DOM的修改

修改节点常用的API方法主要有:

  1. appendChild():末尾追加一个新节点
  2. insertBefore():插入一个新节点
  3. replaceChild():替换节点

注意事项:以上几个方法都是操作的某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点,如果在不支持子节点的节点上,调用了这些方法,将会导致错误。

DOM的查找

DOM节点中的查主要包括:查找元素节点查找

查找元素

  1. getElementById() --- 通过ID访问;
  2. getElementsByClassName() --- 通过类名访问;
  3. getElementsByTagName() --- 通过标签名称访问;
  4. querySelector() --- 通过CSS选择器访问(单个);
  5. querySelectorAll() --- 通过CSS选择器访问 (所有);

关于这一节的内容,可以访问上一篇文章:JavaScript-DOM访问方式

节点查找

所有的节点都有这些属性,都是可以用于访问相关的node节点:

  1. Node.childNodes: 访问一个单元素下所有的直接子节点元素,可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点(比如text节点或其他元素节点)。
  2. Node.firstChild: 与childNodes数组的第一个项(Element.childNodes[0])是同样的效果,仅仅是快捷方式。
  3. Node.lastChild: 与childNodes数组的最后一个项(Element.childNodes[Element.childNodes.length-1])是同样的效果,仅仅是快捷方式。
  4. Node.parentNode: 访问当前节点的父节点,父节点只能有一个,祖节点可以用Node.parentNode.parentNode 的形式来访问。
  5. Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
  6. Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。

总结

DOM操作在JavaScript还是很重要的,简单点说,所有的交互操作都是基于DOM来操作的。而DOM中的操作,最为熟悉的就是对DOM的增、删、改、查。今天的内容也就围绕着这几个方面展开学习。

参考资料:http://www.w3school.com.cn/htmldom/dom_intro.asp

相关文章

  • 超简单自动编译sass扩展和工具

    本文为叩丁狼高级讲师原创文章,转载请注明出处。 在之前的文章中,学习过了DOM的访问方式,其中也把DOM相关的概念...

  • H45-初识webpack

    工程化 自动化(使用sass、babel等工具编译代码) 模块化 性能优化自动化工具将scss/sass转为ie也...

  • Node.js 在线便利贴

    技术栈 sass(css 预编译器) webpack(自动化构建工具,实现LESS,CSS,JS编译和压缩代码) ...

  • Hbuilder scss/sass编译 插件

    1. 安装插件 工具 -> 插件安装 -> scss/sass编译 -> 安装安装 scss/sass编译 插件 ...

  • VS code自动将Sass编译为CSS 二

    要实现Sass到CSS的自动编译,在 VS code自动将Sass编译为CSS 一 的基础上我们还有几个步骤要完成...

  • 前端菜鸟之SASS入门笔记

    Sass 是成熟、稳定、强大的 CSS 扩展语言。sass是需要编译的,sass不能直接用于页面。它可以提高编程效...

  • sass使用

    sass编译和介绍 安装vscode插件Live Sass Compiler编译sass 开启watch sass...

  • 常用gulp插件

    sass的编译(gulp-sass)自动添加css前缀(gulp-autoprefixer)压缩css(gulp-...

  • 前端开发工具(mac),持续更新

    1、CodeKit是incident57开发的一套前端开发助理工具,能够自动编译Less, Sass等前端代码,可...

  • gulp的使用

    gulp是一个构建工具,可以通过它自动执行网站开发过程中的公共任务,例如:编译sass/less,编译压缩混淆ja...

网友评论

      本文标题:超简单自动编译sass扩展和工具

      本文链接:https://www.haomeiwen.com/subject/kuyggctx.html