自用前端面试题(JS-Web-API)

292 阅读3分钟

1.什么是BOM、DOM?有哪些常用API?

定义

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

DOM 全称是 Document Object Model,也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。
这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容(比如添加某些元素、修改元素的内容、删除某些元素),我们把这个 HTML 看做一个对象树(DOM树),它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象,每个对象都叫做一个节点(node),节点可以理解为 DOM 中所有 Object 的父类.

两者关系

DOM的最根本的对象是BOM的window对象的子对象,BOM包含了DOM。

常用API

window对象包括六个子对象:document,frames,history,location,navigator,screen

window对象窗口处理

document对象窗口中加载的文档处理(该对象的属性和方法都很少用或不用!)

frames对象窗口的多个框架布局(该对象也不用!)

history对象处理浏览器的浏览历史

location对象处理当前文档的URL

navigator对象提供浏览器的相关信息

screen对象提供显示器的信息(窗口大小,分辨率)

常用部分API:
location对象

  • location.href-- 返回或设置当前文档的URL
  • location.search -- 返回URL中的查询字符串部分。
  • location.hash -- 返回URL#后面的内容,如果没有#,返回空
  • location.host -- 返回URL中的域名部分,
  • location.hostname -- 返回URL中的主域名部分,
  • location.pathname -- 返回URL的域名后的部分。
  • location.port -- 返回URL中的端口部分。
  • location.protocol -- 返回URL中的协议部分。
  • location.assign -- 设置当前文档的URL
  • location.replace() -- 设置当前文档的URL,并且在history对象的地址列表中移除这个URL
  • location.replace(url);
  • location.reload() -- 重载当前页面

history对象

  • history.go() -- 前进或后退指定的页面数
  • history.go(num); history.back() -- 后退一页
  • history.forward() -- 前进一页

Navigator对象

  • navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
  • navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

2.循环十次调用appendChild,会产生十个新的节点还是产生一个?为什么?

如果添加的是同一个元素,那只会产生一个,因为dom树中,每一个元素都是一个对象,所有的追加元素方法都会去判断这个父元素里面是否拥有这个元素对象,如果拥有则以为已经添加完成,如果没有则添加进去,多次对同一个父元素添加同一个子元素,只会生效一次