【面试必备】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的关照下一路走来的。故本篇只记录一些浅层次的东西了。
本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3493356.html,如需转载请自行联系原作者
【面试必备】javascript操作DOM元素相关推荐
- JavaScript操作DOM元素
查询: ①.标准DOM操作API: document.getElementById("id"). document.getElementsByTagName("div&q ...
- jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
- Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- JavaScript操作DOM对象
目录 一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息 二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
- jQuery操作DOM元素案例
直接打开注释即可观察效果,都已经测试通过!!! <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- electronjs设置宽度_Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...
- JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点 更新:更新Dom节点 添加:添加一个新的节点 删除:删除一个Dom节点 要操作一个Do ...
- JavaScript基础——第三章,JavaScript操作DOM对象
JavaScript操作DOM对象 DOM:Document Object Model (文档对象模型) 节点和节点的关系 访问节点 使用getElement系列方法访问指定节点 根据层次关系访问节点 ...
最新文章
- 如何辨别二逼、文艺互联网公司?
- jBPM专家力作——《深入浅出jBPM》
- (0003) iOS 开发之App 适配iOS 10
- java 能不能回收 文件流_Java文件流关闭和垃圾回收机制
- 【放置奇兵】tips(神圣伤害)
- java数组复制用for_在JavaScript中复制数组的最快方法 - 切片与'for'循环
- HDU - 4578Transformation——线段树+区间加法修改+区间乘法修改+区间置数+区间和查询+区间平方和查询+区间立方和查询
- 华大基因茅矛:云计算让精准医疗走进生活
- Xamarin.Android开发实践(六)
- 网易交互设计师微专业C5 交互设计测试与评估
- 微信小程序生成二维码最新版
- SAP BASIS ADM100 中文版 Unit 9(5)
- 《人月神话》(The Mythical Man-Month)2人和月可以互换吗?人月神话存在吗?
- SpringCloud Alibaba 从入门到精通(精选)
- 【HBase】HBase phoenix 安装使用
- 电子计算机显示屏不亮了,电脑显示屏不亮怎么回事|电脑显示屏不亮如何处理...
- 计算机丢失quartz.dll什么意思,全民K歌运行时提示quartz.dll文件丢失,如何修复
- Mentor_丝印检查——手工绘制丝印线条(标注)到丝印位号距离的检查
- 压力传感器十大技术趋势解析
- 互联网公司logo logo制作
热门文章
- Java代码优化(长期更新)
- Effective Java读书笔记四:通用程序设计
- Effective Java读书笔记一:并发
- 我对Java Serializable(序列化)的理解和总结
- Emacs常用快捷键
- 【OpenCV3】透视变换——cv::getPerspectiveTransform()与cv::warpPerspective()详解
- loadrunner编写脚本常用策略,用以记录,看的懂的拿走,看不懂说明与你有缘无份...
- 阿里云城市数据大脑开发规范
- Unity,WebGL, 页面JS调用Unity方法
- JPA使用指南 javax.persistence的注解配置