Web前端 --- BOM和DOM

目录

• 前端基础之BOM和DOM
  • BOM
    • navigator对象（了解即可）
    • screen对象（了解即可）
    • history对象（了解即可）
    • location对象
    • 弹出框
    • 计时相关
  • DOM
    • 查找节点
    • 其他查找节点的方法
    • 新建节点
    • 给新节点添加属性
    • 插入图片
    • 插入连接
    • 全局文本替换
    • 获取值操作
    • 删除值操作
    • 操作标签类属性
    • 样式操作
    • 事件

前端基础之BOM和DOM

BOM是指浏览器对象模型，他使JavaScript有能力与浏览器进行对话

DOM是指文档对象模型，通过它，可以访问HTML文档的所有元素

BOM

简单的说就是可以使用js命令，对浏览器进行一些操作

navigator对象（了解即可）

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象（了解即可）

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

history对象（了解即可）

history.forward()  // 前进一页
history.back()  // 后退一页

location对象

获取当前页面的地址(URL)，并把浏览器重新定向到新的页面

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

弹出框

警告框

用于确保用户可以得到某些信息，当警告框出出现后，用户西需要点击确定按钮才能继续进行操作

alert("你看到了吗？");

确认框

用于使用户可以验证或者接收某些信息，当确认框出现后，用户需要点击确定或者取消才能继续进行操作，当用户点击的是确定则返回true，如果用户点击的使取消则返回的是false

confirm('are you sure?')

提示框

提示用户在进入某个页面之前需要输入某个值，必须要先进行确定以及取消才能继续执行，输入完成之后，如果点击的是确定，则返回输入的信息，如果点击的是取消，返回的是null

prompt('请输入你的信息')

计时相关

使用之后不是立即执行，而是间隔一段时间之后来执行函数中的代码。

var t = setTimeout('js语句'，毫秒)     1000毫秒 = 1秒

取消运行间隔计时

clearTimeout(t)

在间隔某一段时间之后循环执行函数中的代码

var t = serInterval('js语句'，时间间隔)

取消循环计时

clearInterval(t)

DOM

DOM是一套对文档的内容进行抽象和概念化的方法，简单的说就是对浏览器中的js文档进行操作。

HTML DOM模型被构造为对象树

DOM标准规定HTML文档中每一个成分都是一个节点（node）

• 文档节点（document对象）：代表整个文档
• 元素节点（element对象）：代表一个元素（标签）
• 文本节点（text对象）：代表元素（标签）中的文本
• 属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
• 注释是注释节点（commment对象）

javascript可以通过DOM对HTML的影响：

• 可以改变所有的HTML元素
• 可以改变页面中所有的HTML属性
• 可以改变页面中所有CSS样式
• 可以对页面中所有时间做出反应

查找节点

> document.getElementsByClassName('c1')   结果直接是数组，不是对象本身
< HTMLCollection [div.c1]

> document.getElementsByTagName('span')   查找js中所有的span
< HTMLCollection [span.c2]

> document.getElementById('d1')     查找js中的d1，返回的是一个对象本身，
< p id=​"d1">​
           我是你爸爸
        ​</p>​

其他查找节点的方法

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

新建节点

var imgEle = document.createElement('img')   # 创建一个新的节点

给新节点添加属性

1.imgEle.src = '111.jpg'   # 只能添加默认属性
2.imgEle.setAttribute('username','wang')   # 可以添加自定义属性和默认属性

插入图片

var divEle = document.getElementsByClassName('c1')[0]   # 查找出来是数组，使用索引取值
divEle.append(imgEle)

插入连接

# 新建一个a标签
> var aEle = document.createElement('a')
# 添加a标签的属性，访问地址
> aEle.setAttribute('href','http://www.baidu.com')
# 给a标签添加文字，
> aEle.innerText = '点击'
# 获取a标签需要插入的地方，默认插在最后一个位置
> var divEle = document.getElementsByClassName('c1')[0]
# 将a标签插入到c1中
> divEle.append(aEle)

# 扩展
# 在...之前插入
> var cEle = document.getElementsByClassName('c2')[0]

> divEle.insertBefore(aEle,cEle)

全局文本替换

> var divEle = document.getElementByClassName('c1')[0]

> divEle.innerText 

> divEle.innerHTML

注意：divEle.innerText 和 divEle.innerHTML 的相同点：当后边执行的是文字的时候，都能执行替换文字的作用

不同点：divEle.innerHTML 输入的是HTML内的代码类型的时候会直接执行

divEle.innerText 会将输入的内容直接打印出来。

获取值操作

• divEle.innerText ：获取某个节点内的所有文本

> divEle.innerText
< "我是你爸爸"

• **divEle.getAttribute('value') ** ： 获取所在节点中的属性的值

> divEle.getAttribute('id')
< "d1"

• divEle.value：可以选择用户输入和选择的值，适用于input，select，textarea，不适合多选

• ilEle.files[0]：可以查看文件的内容

删除值操作

• divEle.removeAttribute('age')：删除属性值
• divEle.removeChild(aEle)：删除节点

# 先获取需要删除的节点
> var aEle = document.getElementsByTagName('a')[0]
# 将节点从父节点中删除
> divEle.removeChild(aEle)

操作标签类属性

var divEle = document.getElementsByTagNama('div')[0]

• 查看类列表 被附加了哪些属性

  divEle.classList
  

• 删除类列表中的属性

  divEle.classList.remove('属性')
  

• 添加类列表的属性

  divEle.classList.add('属性')
  

• 判断类列表有没有这个属性

  divEle.classList.contains('属性')
  

• 判断类列表有没有这个属性，有了就删除，没有就添加

  devEle.classLisr.toggle('属性')
  

样式操作

使用DOM对css的样式进行操作，

var pEle = document.getElementByTagName('p')[0]

pEle.style.color = 'red'

pEle.style.backgroundColor = 'red'

pEle.style.fontSize = '48px'

pEle.style.padding = '20px'

pEle.style.margin = '20px'

事件

当符合某个条件下，自动触发的动作/相应

• 常见的事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

js绑定事件

1.直接写一个button标签，在里边进行定义

<button onclick="func()">按钮</button>

2.使用标签查找动态绑定的方式

function func() {
            alert('我被点击了')
            }
            var i1Ele = document.getElementById('d1');
            i1Ele.onclick = function () {
                // i1Ele标签被点击之后 你能做的事
                func()
            }

3.js代码书写位置

1.可以在head内，用script标签书写，使用onload等待某某加载完毕之后才触发

2.直接写在body最下方