🌈本系列文章是博主精心整理的面试热点问题，吸收了大量的技术博客与面试文章，总结多年的面试经历，带你快速建立前端面试知识体系。抓住每一场面试的机会，知己知彼才能百战百胜。直击技术痛点，主动出击，精密打击，这才是面试拿到高薪的秘诀！
本章介绍 DOM 操作的知识点和题目。包括 DOM 结构，常用 DOM 操作，DOM 性能优化等。DOM 是网页结构的基础，学会 DOM 操作才可以做网页开发。
JS 基础知识，规定语法（ECMA 262 标准）
JS Web API，网页操作的 API（W3C 标准）
前者是后者的基础，两者结合才能真正实际应用
DOM，document object model
DOM的本质是从HTML中解析出来的一棵树，DOM结构就是树结构。
DOM节点操作：
获取dom节点：
documen.getElementById()
document.getElementsByClassName
document.getElementsByTagName
docuement.querySelectorAll // css选择器
attribute // 对html属性进行修改
property // js操作属性的一种形式 对dom元素的js变量进行修改
const plist = document.querySelectorAll('p')
const p1 = plist[0]
p1.className // 返回元素的类名
p1.nodeName // 返回节点名称
p1.nodeType // 返回节点类型 一般元素返回的1
attribute和property的区别
property：修改对象属性，不会体现到html结构中 （推荐使用：设置js同一变量不一定会重新渲染）
attribute：修改html属性，会改变html结构（设置了dom属性就会重新进行dom渲染）
两者都可能引起dom重新渲染
建议尽量用 property 操作，因为property可能会在JS机制中，避免一些不必要的DOM渲染；但是attribute是修改HTML结构，一定会引起DOM结构的重新渲染，而DOM重新渲染是比较耗费性能的
新增/插入节点
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
//新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
//插入节点
div1.appendChild(newP)
//移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)
获取子元素列表，获取父元素
const div1ChildNodes = div1.childNodes
cosnole.log(div1.childNodes)
const div1ChildNodesP= Array.prototype.slice.call(div1.childNodes).filter(child => {//过滤
if(child.nodeType === 1) {//获得正常DOM节点。而不是text节点
return true
}
return false
})
cosnole.log('div1ChildNodesP',div1ChildNodesP)
console.log(p1.parentNode)
删除子元素
div1.removeChild(div1ChildNodesP[0])
DOM 性能 DOM 操作会占用CPU，可能会导致浏览器的重绘和重排，使得运行耗时或者说耗费CPU计算比较多，频繁操作可能会导致卡顿的一些问题
// 不缓存查询
for(let i = 0, i < document.getElementsByTagName('p').length, i++) {
// 每次循环，都会计算 length, 频繁进行 DOM 查询
}
// 缓存 DOM 查询结果
const length = document.getElementsByTagName('p').length；
for(let i = 0, i < document.getElementsByTagName('p').length, i++) {
// 缓存 length，只进行一次 DOM 查询
}
2.将频繁操作改成一次性操作
const listNode = document.getElementById('list');
// 频繁操作
for(let i = 0, i < 10, i++) {
const li = document.createElement('li');
li.innerHTML = 'List item' + x;
listNode.appendChild(li);
}
// 频繁操作改为一次性操作
// 创建一个文档片段，此时还没有插入到 DOM 树中 （理解为创建了一个虚拟DOM的teamplate元素）
const frag = document.createDocumentFragment();
for(let i = 0, i < 10, i++) {
const li = document.createElement('li');
li.innerHTML = 'List item' + x;
frag.appendChild(li); // 将生成的 li 先插入到 虚拟DOM中
}
// 都完成之后，再插入到 DOM 树中
list.appendChild(frag);
下期介绍js的高级用法
我有用于控制用户任务的Rails5API项目，我有以下错误，但并非总是针对相同的Controller和路由。ActionController::RoutingError:uninitializedconstantApi::V1::ApiController我向您描述了一些我的项目，以更详细地解释错误。应用结构路线scopemodule:'api'donamespace:v1do#=>Loginroutesscopemodule:'login'domatch'login',to:'sessions#login',as:'login',via::postend#=>Teamroutessc
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h
我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path
Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我的公司有一个巨大的数据库，该数据库接收来自多个来源的(许多)事件，用于监控和报告目的。到目前为止，数据中的每个新仪表板或图形都是一个新的Rails应用程序，在巨大的数据库中有额外的表，并且可以完全访问数据库内容。最近，有一个想法让外部(不是我们公司，而是姊妹公司)客户访问我们的数据，并且决定我们应该公开一个只读的RESTfulAPI来查询我们的数据。我的观点是-我们是否也应该为我们的自己
我读了"BingSearchAPI-QuickStart"但我不知道如何在Ruby中发出这个http请求(Weary)如何在Ruby中翻译“Stream_context_create()”？这是什么意思？"BingSearchAPI-QuickStart"我想使用RubySDK，但我发现那些已被弃用前(Rbing)https://github.com/mikedemers/rbing您知道Bing搜索API的最新包装器(仅限Web的结果)吗？ 最佳答案 好吧，经过一个小时的挫折，我想出了一个办法来做到这一点。这段代码很糟糕，因为它是
我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:AmazonAPIlibraryforPython?我正在寻找一个AmazonAPI，它可以让我:按书名或作者查找书籍显示书籍封面获取有关每本书的信息(价格、评级、评论数、格式、页数等)Python或Ruby库都可以(我只想要最容易使用的库)。有什么建议么？我知道在SO上还有其他一些关于此的帖子，但这些API似乎很快就过时了。[几个月前我尝试了几个建议的Ruby库，但无法让它们中的任何一个工作。]
很高兴看到google代码:google-api-ruby-client项目，因为这对我来说意味着Ruby人员可以使用GoogleAPI-s来完善代码。虽然我现在很困惑，因为给出的唯一示例使用Buzz，并且根据我的实验，Google翻译(v2)api的行为必须与google-api-ruby-client中的Buzz完全不同。.我对“Explorer”演示示例很感兴趣——但据我所知，它并不是一个探索器。它所做的只是调用一个Buzz服务，然后浏览它已经知道的关于Buzz服务的事情。对我来说，Explorer应该让您“发现”所公开的服务和方法/功能，而不一定已经知道它们。我很想听听使用这个