2021年前端基础面试题 9-11 DOM BOM

DOM (document object model)
BOM (browser object model)

DOM的数据结构是树型结构

attribute 是修改DOM标签,会改变HTML结构
P.setAttribute(‘style’,’width:100px’)
property 是修改Js对象,性能更好,推荐用这种方式
P.style.width =100px
2者都会触发DOM渲染

插入子节点

divEl.appendChild(P)
注意如果P存在,会变成移动节点

获取父节点

P.parentNode

获取子元素

divEl.childNodes
注意childNodes中会包含nodeType为3的text类型节点,需要过滤出nodeType等于1的b元素标签类型

nodeList转数组

Array.prototype.slice.call(NodeList)

删除子元素

divEl.removeChild(P1)

DOM操作性能优化注意点

将循环插入或修改DOM的操作放入一个临时片段中,遍历完成后再统一插入到容器节点中,说白了就是减少不必要的渲染次数。

判断ua的方法

这个自行在网络上搜索吧,可能随着技术更新每年都不一样

location属性

hash 设置或返回从井号 (#) 开始的 URL(锚)。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL(查询部分)。

History 对象属性

length 返回浏览器历史列表中的 URL 数量。

History 对象方法

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。

如何阻止超链接跳转 e.preventDefault
如何为下拉加载的图片列表添加点击事件, 事件代理

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:232 次浏览