【面试必备】javascript操作DOM元素
前言
时间过的真快,不知不觉就到年底了。问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗?
为了应对年后跳槽高峰的到来,从现在开始我要把基础过一遍了。从网上搜集的面试题入手,尽量全面的覆盖到前端的基础知识。为年后的面试提前热身~虽然本人也不是什么面霸,没有什么面试经验,但把基础打扎实是永远不会错的,所以不嫌麻烦不嫌重复劳动,我会收集一些简单基础的面试题,从中提炼出相关的前端知识,然后分析加以记录。大概算了算,只要勤快点,从现在开始一直积累到年后,应该也能小有收获~
另外还想说一下我对原生js的看法,也是最近产生的。随着IE6、7、8的逐渐淘汰,ES5的普及,我们已经可以在ES5的标准上进行全面开发了。照这个潮流来看,jQuery似乎要被没落了,因为它的主要工作就是做低版本IE的兼容处理。我是jQuery的严重依赖者,如果哪天jQuery真的消失了,岂不连代码也不会写了。真令人担忧,所以今后要重视原生js了,能不用jq的地方就不用。随着这次总结基础知识,我也准备把原生js好好复习一遍,为未来早做打算。
正题
说到面试题,你最怕什么样的呢?我最怕的是题目只有一句话的,越短越难,比如:如何用js操作DOM元素。
这道题简单吗?,其实不然。DOM操作包括元素的创建、查找、添加、移动、复制、删除,每种操作又可以延伸出很多问题。如果你常年使用jq或其他框架,原生的写法可能早就忘了。所以,我需要用一篇文章来描述清楚这个问题。
创建新元素
document.createElement(elemengTagName)用来创建一个元素,返回该新建元素的引用。需要注意参数是标签的名称。在jq中我们可以这样创建一个元素
var node = $('<div>');
var node2 = $('<span id="s"></span>');
使用原生的我们必须传入元素的标签名称,不能像jq中那么灵活。如:
var node = document.createElement('div');
添加新元素
有两个方法可以向DOM树中添加新元素,分别是appendChild(newElement)和insertBefore(newElement,beforeWhichElement)。
appendChild向一个元素添加子节点,追加在尾部,如在body中追加一个元素:
var node = document.createElement('div');
node.innerHTML = '新添加的节点';
document.body.appendChild(node);
insertBefore也是向一个元素添加子节点,不过可以指定添加在哪个子节点的前面,如果不指定第二个参数,会默认添加到最后,即与appendChild效果一样。使用方法如下:
var node = document.createElement('div');
node.innerHTML = '新插入的节点';
var list = document.getElementById('list');
var item1 = document.getElementById('item1');
list.insertBefore(node,item1);
会在list的子元素item1前面插入新创建的元素node。原生js没有像jq的prepend那样可以从头部添加子节点的方法。
移动元素
移动元素在DOM树中的位置还是比较常见的需求。完成元素的移动不需要新的方法,还是使用上面的appendChild和insertBefore,只不过操作的元素不是新创建的,而是从已有节点中选择你需要移动的。例如交换两个元素的位置:
var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
list.insertBefore(item2,item1);//把item2插入到item1前面
使用appendChild也是同样的道理。如:
var item3 = document.getElementById('item3');
var s = document.getElementById('some');
item3.appendChild(s);//把id为some的元素移动到item3下
复制元素
元素的复制使用cloneNode(cloneChildNodes)方法,参数为boolean类型,表示是否克隆子元素。与jq的clone方法不同的时,原生的无法克隆元素上绑定的事件监听器。使用方法如下:
var s = document.getElementById('some');
var sclone = s.cloneNode(true);
删除元素
使用removeChild(element)方法来删除元素,需先找到父元素,然后删除其子元素,如下:
var list = document.getElementById('list');
var item1 = document.getElementById('item1');
list.removeChild(item1);
查找元素
查找元素的内容稍多一点。jq提供了强大的选择器,这也是它的核心之一。离开了jq,我们还是要明白如何利用原生js来选择到你所需的元素。getElementById(id)不多说了,getElementsByTagName(tagName)返回符合元素的数组。除此之外,我们还需知道一个元素都有哪些指针可以访问到其他元素。概括一下,主要包括以下指针:
- parentNode:指向父节点
- childNodes:指向所有子节点,是一个数组
- previousSibling:指向前一个兄弟节点
- nextSibling:指向后一个兄弟节点
- firstChild:指向第一个子节点
- lastChild:指向最后一个子节点
使用如下:
var item2 = document.getElementById('item2');
var parentNode = item2.parentNode;
var childNodes = item2.childNodes;
var previousSibling = item2.previousSibling;
var nextSibling = item2.nextSibling;
var firstChild = item2.firstChild;
var lastChild = item2.lastChild; console.log(parentNode,childNodes,previousSibling,nextSibling,firstChild,lastChild);
你可能觉得这比起jq的选择器简直差远了。告诉你一个好消息,现在可以有更强大的东西用了,那就是querySelector和querySelectorAll,这两个方法是ES5中新增的,他们的作用就想jq的选择器一样,你可以使用像css风格那样的描述来选择所需的元素,是不是很爽!比如:
document.querySelector('#list');//选择id为list的元素
document.querySelectorAll('.green');//选择class为green的元素,返回元素的数组
两者的区别你可看出来了,querySelector只会返回一个元素,如果匹配到多个就返回第一个。而querySelectorAll会返回所有匹配的元素数组。有了这两个原生的js方法,你是不是觉得jQuery的没落不远了呢?
结束
本篇的记录到此结束,当以后面试问到DOM操作时,就可以应付的过来了。不亲手敲一下原生的代码真是忘了不少呢。不过有一点是本篇没有涉及到的,那就是DOM操作的浏览器兼容性。说实话这块的知识我也没有真实遇到过,都是在jq的关照下一路走来的。故本篇只记录一些浅层次的东西了。
【面试必备】javascript操作DOM元素的更多相关文章
- JS/JQuery操作DOM元素笔记
原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- 跨frame操作dom元素
今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- javaScript操作DOM对象(看三遍,敲三遍,写三遍! 不会你找我)!!
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- 你所不了解的javascript操作DOM的细节知识点(一)
你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...
随机推荐
- 在iOS中使用Phonegap防止Webview被上下拖动
在使用PhoneGap制作App的时候,iOS作为承载App页面的容器的Webview,在手指向下或者向上滑动屏幕时,除了页面本身的滚动外,还经常会看到整体页面底部和屏幕底部被拖动出黑屏 为了防止这一 ...
- mysq安装以及修改密码
安装版MySQL是不能一键安装的,下载下来是压缩包,解压后只要进行相关配置就可以正常使用: 文章主要是记录一下,以防自己忘记: 1.首先在mysql官网--http://dev.mysql.com/d ...
- html中 table 和 form的位置
对于web前端开发来说 经常会用到 像firebug这样审查元素 工具 发现了一个这样的现象: 当 able><form><tr>....</tr>< ...
- css3选择器总结
1.p[class^/$/*=td]所有p标签的前面带有td/后面带有td/所有带有td的类的三种样式. 2.div:first-child/last-child/nth-child()在父元素下的第 ...
- 查询目前运行状态-CPU等情况
对目前的数据库的运行状况有一个基本的了解 ) DB_NAME(a.dbid) AS dbname , loginame , spid , cpu , b.text , lastwaittype , w ...
- IntegerCache类
先看代码实例现象: 问题:为什么都是比较数值,第一个为true,第二个确为false呢? 查找源码(java.lang.Integer),看到如下代码: /** * Cache to support ...
- Fiddler 手机端证书安装No root certificate was found
测试过程中发现在浏览器中访问代理服务器及端口,不通,提示要安装证书. 点击证书安装时,提示错误: No root certificate was found,Have you enabled HTTP ...
- Java开发Webservice的组件
参考:http://bbs.csdn.net/topics/390900831 转自:http://blog.csdn.net/dragoo1/article/details/50759222 htt ...
- Python :open文件操作,配合read()使用!
python:open/文件操作 open/文件操作f=open('/tmp/hello','w') #open(路径+文件名,读写模式) 如何打开文件 handle=open(file_name,a ...
- <转>C Runtime Library(MSVCRT)来历
(转载)C Runtime Library(MSVCRT)来历 msvcrt.dll (名称:Microsoft C Runtime Library)提供了printf,malloc,strcpy ...