BOM和DOM是什么? css3弹性盒子?创建数组的几种方式?

简介: BOM:浏览器对象模型(Browers Object Model)允许JavaScript与浏览器对话。通过BOM的对象和方法可以完成对浏览器窗口的操作,如控制窗口及弹窗、通过location对象可以获取页面信息、通过navigator对象了解浏览器、通过history对象操作浏览器历史等。BOM的核心是window对象。

一省:HTML

17. BOM和DOM是什么?

1.BOM:浏览器对象模型(Browers Object Model)允许JavaScript与浏览器对话。通过BOM的对象和方法可以完成对浏览器窗口的操作,如控制窗口及弹窗、通过location对象可以获取页面信息、通过navigator对象了解浏览器、通过history对象操作浏览器历史等。BOM的核心是window对象。

window.close();//关闭浏览器
window.alert("notice!");//弹窗提示
console.log(window.location);//当前网页的信息
window.location.href = "http://123.cm" //跳转网页
console.log(window.navigator);//当前浏览器的信息
console.log(window.innerHeight);//浏览器窗口的内高度
console.log(window.innerWidth);//浏览器窗口的内宽度
window.history.go(-1);//倒退一页
...

2.DOM: 文档对象模型(Document Object Model),通过DOM的对象和方法可以完成对网页中元素的增删改,让网页产生动态效果。DOM的核心是document对象,document属于window,所以BOM是包含DOM的。

//查找元素
let element = document.getElementById("app");//获取id为app的元素

// 改变元素
element.innerHTML = `<p>改变的内容</p>`

// 创建和删除元素
document.createElement(element)
document.removeChild(element)

// 添加事件
element.onclick = function(){
    code }

这些都是操作DOM元素。

二省: CSS

17. css3弹性盒子

  1. 弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
  2. 常用属性
属性 描述
display 指定 HTML 元素盒子类型,属性的值为 flex 或 inline-flex将其定义为弹性容器
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

三省:JavaScript

17. 创建数组的几种方式?

1. 构造函数创建

let arr = new Array()

利用构造函数创建数组时,可以传参数。如果传一个参数并且是数值类型的话,那么就会创建一个length等于这个数字的数组。

let arr = new Array(20)
console.log(arr);//[空属性 × 20]

如果传了一个或多个其他类型的参数,就会创建一个包含这些参数的数组。

let arr = new Array("a")
console.log(arr);//['a']
//new 可省略
let arr1 = Array(100,"str", null, undefined, {
   })
console.log(arr1);//[100, 'str', null, undefined, {}}]

2. 数组字面量创建

// 字面量创建
let arr = [1, "2", [null, undefined]]
console.log(arr);//[1, '2', [null, undefined]]

3. ES6转化数组方法

  • Array.from()
    是把类数组或有length属性的元素转换成数组

     // 把字符串拆分成数组
    let arr = Array.from("Str")
    console.log(arr);//['S', 't', 'r']
    
    // 把arguments对象转化成数组
    function args() {
         
      console.log(arguments);//Arguments(3) [1, '2', null, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      console.log(Array.from(arguments));//[1, '2', null]
    }
    args(1, "2", null)
    
    // 可以转化带有必要属性的自定义对象,对象以下标为键名
    let arr1 = Array.from({
         
      0: "Jason",
      1: "Marry",
      2: "Bob",
      length: 3
    })
    console.log(arr1);
    
  • Array.of() 可以把一组参数转化成数组。
     // Array.of()
      let arr = Array.of(1, 2, 3)
      let arr1 = Array.of(null)
      let arr2 = Array.of(undefined)
      console.log(arr, arr1, arr2);//[1, 2, 3] [null] [undefined]
    
相关文章
|
2月前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
|
2月前
|
JavaScript 安全 物联网
DOM 和 BOM 在项目中的应用
【10月更文挑战第19天】在现代网页开发和应用项目中,DOM(文档对象模型)和 BOM(浏览器对象模型)扮演着至关重要的角色。它们为开发者提供了与网页文档和浏览器环境进行交互的能力,使项目能够实现丰富的功能和用户体验。
|
2月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
3月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
2月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
99 1
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
31 4
|
3月前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
3月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
2月前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
|
4月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
142 1