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,这里以设置文字颜色为例。



  • 2018-11-17 21:05:48

    Android ANR发生的原因总结和解决办法

    ANR的全称是application not responding,是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造成ANR。一般地,这时往往会弹出一个提示框,告知用户当前xxx未响应,用户可选择继续等待或者Force Close。

  • 2018-11-17 21:08:09

    Android 单个应用的内存限制

    获取Android手机应用内存大小 手机不同其性能也不同,手机本身内存可能有大有小,所以针对每个应用的内存大小也不相同。

  • 2018-11-17 21:11:14

    Android中App可分配内存的大小

     结果:(1)未设定属性android:largeheap = "true"时,可以申请到的最大内存空间为221M。      (2)设定属性android:largeheap = "true"时, 可以申请的最大内存空间为478M,是原来的两倍多一些。

  • 2018-11-17 22:44:53

    LeakCanary,30分钟从入门到精通

    在性能优化中,内存是一个不得不聊的话题;然而内存泄漏,显示已经成为内存优化的一个重量级的方向。当前流行的内存泄漏分析工具中,不得不提的就是LeakCanary框架;这是一个集成方便, 使用便捷,配置超级简单的框架,实现的功能却是极为强大的。

  • 2018-11-17 22:53:01

    gc for alloc freed

    在数组中选择图片然后显示,然后。。。logcat不断显示GC回收。最后程序黑屏。

  • 2018-11-17 23:25:38

    Android高效内存1:一张图片占用多少内存

    在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用。而在App中,大部分内存可能被我们图片占用了,所以减少图片的内存占用可以带来直接的效果。本文就简单介绍一张图片到底占用多少内存,我们先假设我们有一张图片时 600 * 800 的,图片占用空间大小假设是 100KB。另外本文知识点也是面试官喜欢问的一个点,看看自己的回答到什么级别了。

  • 2018-11-18 09:06:06

    Android子线程中更新UI的3种方法

    UI的更新必须在主线程中完成,所以不管上述那种方法,都是将更新UI的消息发送到了主线程的消息对象,让主线程做处理。

  • 2018-11-19 15:10:23

    nodemailer的使用,nodejs发送邮件

    前段时间有个很普通的项目需要发邮件的功能,而且是刚开始学nodejs,所以只是搜索了下用什么好的库能实现,就找到了nodemailer了。这篇文章主要是记录一下使用的过程和经验。