JS如何操作DOM this.$el

2020-01-16 08:42:26

有时候我们做一些优秀或者更灵活的东西,我们需要亲自操作dom

下面我们来看一下如何去操作dom,并且vue中我们可以使用this.$el来对dom进行操作。

JS的引入方式

JS代码可在html中任意位置编写,但浏览器解析代码是从上到下的,需注意此时html是否已经解析该标签,能让JS能否获取该DOM对象,所以有时会把代码放到html的结束前,即是</html>前

直接在html中编写 :<script type="text/javascript">代码</script> 

通过外部引用进来 : <script type=text/javascript src=””></script>

为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部


DOM的简单介绍

浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象


文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。


HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>里的内容JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。


认识JavaScript中的DOM编程接口:

上面说了html形成的dom树,接着说下通过js的dom编程接口去操作这棵dom树。

JavaScriptDOM操作的常用方法和属性:

常用方法:

获取节点:

    document.getElementById(idName)          //通过id名来获取元素,返回一个元素对象

    document.getElementsByName(name)       //通过name属性获取元素,返回元素对象数组

    document.getElementsByClassName(className)   //通过class名来获取元素,返回元素对象数组(ie8以上)

    document.getElementsByTagName(tagName)       //通过标签名获取元素,返回元素对象数组

获取/设置元素的属性值:

    element.getAttribute(attributeName)     //括号传入属性名,返回对应属性的属性值

    element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值

创建节点Node:

    document.createElement("h3")       //创建一个html元素,这里以创建h3元素为例

    document.createTextNode(String); //创建一个文本节点;

    document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例

增添节点:

    element.appendChild(Node);   //往element内部最后面添加一个节点,参数是节点类型

    elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode

删除节点:

    element.removeChild(Node)    //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null


常用属性:

获取当前元素的父节点 :

    element.parentNode//返回当前元素的父节点对象

获取当前元素的子节点:

    element.chlidren//返回当前元素所有子元素节点对象,只返回HTML节点

    element.chilidNodes  //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)

    element.firstChild //返回当前节点的第一个子节点对象        (节点

    element.firstElementChild //返回当前元素的第一个子节点对象     (元素

    element.lastChild//返回当前节点的最后一个子节点对象        (节点

    element.lastElementChild //返回当前元素的第一个子节点对象     (元素

获取当前元素的同级元素:

    element.nextSibling//返回当前节点的下一个同级节点 没有就返回null   (节点

    element.nextElementSibling//返回当前元素的下一个同级元素 没有就返回null    (元素

    element.previousSibling  //返回当前节点上一个同级节点 没有就返回null    (节点

    element.previousElementSibling  //返回当前元素上一个同级元素 没有就返回null    (元素

注意事项

    firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理

获取当前元素的文本:

    element.innerHTML//返回元素的所有文本,包括html代码

    element.innerText  //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码

获取当前节点的节点类型:

    node.nodeType//返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。

设置样式:

    element.style.color=“#eea”;      //设置元素的样式时使用style,这里以设置文字颜色为例。



  • 2020-02-24 18:48:34

    规划驾车路线和途径点及判断车辆路线偏移

    项目需求需要利用百度地图构建路线并支持设置途径点,以及可以实时监控车辆是否偏移路线;两种方案。 写了比较完整的注释了,替换ak可直接看效果,规划驾车路线和途径点及判断车辆路线偏移

  • 2020-02-25 15:15:56

    nuxtjs全栈

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间使用路由,我们建议使用<nuxt-link> 标签。

  • 2020-02-25 19:24:08

    IDEA 简单的正则匹配

    IDEA在进行查看或替换的时候,勾选Regex 选项就可以进行正则匹配查找了 几个简单实用的正则:

  • 2020-02-26 20:16:49

    一条简单的命令就可以将 stylus 语法转换为 scss 语法

    因为早期有个项目用到了 stylus,stylus 开发起来很爽,但 stylus 基于缩进的代码在修改的时候不是很方便,加上所在团队开发使用的都是 SCSS ,为了便于维护和统一,准备将项目中的 stylus 替换成 SCSS。手动转换 stylus 浪费时间,且出错率大,当时在想也许别人也有这样的需求呢,所以就做了这样一个项目。请各位大佬动动你们发财的小手,给我点个 star,不胜感激。^_^

  • 2020-02-27 09:01:32

    npm yarn 命令对比

    Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题.

  • 2020-02-29 20:47:34

    Nuxt 特有函数和变量

    asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的,所以,请求数据时,不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。