文章目录

• • • 1 DOM简单入门
    • • 1.1 获取对象和修改
      • 1.2 事件绑定
    • 2 BOM
    • • 2.1 简介
      • 2.2 Window对象
      • 2.3 Location
      • 2.4 History
    • 3 DOM
    • • 3.1 document
      • 3.2 Element
      • 3.3 Node
      • 3.4 HTML DOM
    • 4 BootStrap
    • • 4.1 快速入门（模板）
      • 4.2 响应式布局
      • 4.3 CSS样式
      • 4.4 组件、插件

1 DOM简单入门 1.1 获取对象和修改

    
    
    


    
Head Xhh
    



    

1.2 事件绑定

• 三种绑定方式

• Demo

2 BOM

Browser Object Model
浏览器对象模型

2.1 简介

• Navigatot：浏览器对象
• Window：窗口对象*
  • Location：地址栏*
  • History：历史记录*
  • DOM对象 document对象
• Screen屏幕对象（不重要）

2.2 Window对象

不需要创建Window对象
使用【1】：window.方法()；
使用【2】：方法()；

弹框相关

• alert
• /confirm/i
• prompt

打开关闭

• open
• close

定时器相关

• setTimeout
• setInterval

属性相关

• history
• document

2.3 Location

• reload
• href

2.4 History

3 DOM

document Object Model

• document：文档对象*
• Element：元素对象*
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象
• Node：节点对象（其他5个的父对象）*

3.1 document

window.document

方法
getxxx()和createxxx()

• getElementById()
• getElementsByTagName()：返回数组
• getElementsByClassName()：返回数组
• getElementsByName() ：返回数组

    
div1
    
div2
    
div3

    
div4
    
div5

    

    

• createElement

var table = document.createElement("table");
alert(table);

3.2 Element

• removeAttribute()：删除属性
• setAttribute()：设置属性

    
    


    把我设置成链接
    
    

    

3.3 Node

方法

• appendChild()
• removeChild()
• replaceChild()

属性

• parentNode：返回父节点

    
    
    



    

        div1
        
div2
    

    点击删除子节点
    点击添加子节点

    

3.4 HTML DOM

• innerHTML
• 使用HTML元素对象属性属性
• 控制样式
  • style
  • class

    
    

    



    

        div1
    
    

        div2
    

    

4 BootStrap

前端开发框架、响应式布局（自动调整PC、Phone）
js插件、css样式库
会用即可

4.1 快速入门（模板）

    
    
    
    
    

    
    

    
    
    
    


你好，世界！

4.2 响应式布局

依赖于栅格布局

> 1.定义容器。相等table
> 		container：固定宽度
> 		container-fluid：100%宽度
> 2.定义行。相当于tr   样式row
> 3.定义元素，指定在不同设备中占用格子的数目。相当于td  样式：col-设备代号-格子个数
> 		设备代号
> 		https://v3.bootcss.com/css/#grid-options

    


        


            
div1
            
div1
            
div1
            
div1
            
div1
        
    

4.3 CSS样式

按钮

link
Button

图片

表格、表单

    
    
    
    
    

    
    

    
    
    
    



    

        

            
Name
            
Age
        
        

            
xhh
            
18
        
    
    




    

        

            Email
            

                
            
        
        

            Password
            

                
            
        
        

            

                

                    
                         Remember me
                    
                
            
        
        

            

                Sign in
            
        
    

4.4 组件、插件

• 组件
  • 导航条
  • 分页条
• 插件
  • 轮播图

---

参考

W3School参考手册
BootStrap