JS---------BOM

最新推荐文章于 2024-03-20 21:47:37 发布

XCharazz

最新推荐文章于 2024-03-20 21:47:37 发布

阅读量100

点赞数

分类专栏： web学习知识点文章标签： js javascript

本文链接：https://blog.csdn.net/zxq144/article/details/111698461

版权

web学习知识点专栏收录该内容

36 篇文章 1 订阅

订阅专栏

BOM

1.回顾

1.1 数组迭代方法

every()：对数组进行判断，所有结果都为true，最后结果才为true
some():对数组进行判断，只要有一个为true，结果就为true
filter():对数组进行判断，满足条件的组成一个新的数组返回
map():循环数组，返回的值会组成一个新的数组返回
forEach():循环数组

1.2 DOM

获取
- 通过选择器
  - document.querySelector（）：选择器选中的标签中的第一个
  - document.querySelectorAll（）：选择器选中的所有标签
- 获取子节点
  - 父节点.children 非标准属性只获取标签
  - 父节点.childNodes 标准属性获取所有到所有的节点(文本、标签、属性、注释…)
- 获取父节点
  - 子节点.parenNode ：直接父节点
  - 子节点.offsetParent :获取定位父节点，没有父节点获取到body
- 获取兄弟节点
  - 首：父节点.fristElementChild || 父节点.firstChild
  - 尾：父节点.lastElementChild || 父节点.lastChild
  - 上一个：参考节点.previousElementSibling|| 参考节点.previousSibling
  - 下一个：参考节点.nextElementSibling|| 参考节点.nextSibling
创建节点
- 创建标签节点
  - document.createElement（“标签名”）
- 创建文本节点
  - document.createTextNode（“文本内容”）
添加
- 追加：在父节点的末尾添加
  - 父节点.appendChild（子节点）
- 插入：在某个节点之前添加
  - 父节点.insertBefore(newChild,refChild)
删除
- 删除自身：标签.remove（） ie不兼容
- 删除子元素: 父元素.removeChild(子节点)
替换与复制
- 替换：父节点.replaceChild(newChild,refChild)
- 复制：被复制的节点.cloneNode（false/true）
操作属性节点
- 设置：节点.setAttribute（属性名，属性值）
- 获取：节点.getAttribute（属性名）
- 删除：节点.removeAttribute（属性名）
- 和标签.属性区别，可以获取直接写在行间的自定义属性，删除属性

2.表单

2.1 快速获取表单元素

//1.DOM快速获取表单元素  表单.name名称
console.log(oForm.user); //输入框 用户名
console.log(oForm.password); //输入框 密 码

console.log(oForm.sex); //[input, input, value: "女"]
console.log(oForm.sex.value);

2.2 表单事件方法

表单事件

oForm.onsubmit : 表单提交事件

return true : 默认，允许提交

return false：阻止提交

oForm.onreset : 表单重置事件

return true：默认允许重置

return false：阻止重置

//点击提交按钮，如果用户名为空，不能提交
oForm.onsubmit = function () {
    if (oForm.user.value == "") {
        alert("请输入用户名");
        return false;
    }
}
//2.oForm.onreset  : 表单重置事件
oForm.onreset = function () {
    //confirm(确认信息) 带确认的对话框  true--确定    false---取消
    /* var is = confirm("是否重置");
            console.log(is); */

    return confirm("是否重置");
}

表单元素事件

oIn.onfocus : 获取焦点

oIn.onblur : 失去焦点

//3.获得焦点  表单元素.onfocus
oForm.user.onfocus = function () {
    this.style.borderColor = "red";
}

//4.失去焦点 表单元素.onblur
oForm.user.onblur = function () {
    this.style.borderColor = "#ccc";
}

oIn.oninput/oIn.onpropertychange : 输入框发生改变的时候实时触发

oninput：ie低版本不兼容

onpropertychange：ie浏览器

//5.oIn.oninput : 输入框发生改变的时候实时触发
oForm.user.oninput = mim;
oForm.user.onpropertychange = mim;
function mim(){
    //6位以上弱  9位以上中  12-24强    密码需要在6-24位之间
    if (this.value.length >= 12 && this.value.length <= 24) {
        oSpan.innerHTML = "强";
        oSpan.style.color = "green";
    } else if (this.value.length >= 9&&this.value.length < 12) {
        oSpan.innerHTML = "中";
        oSpan.style.color = "orange";
    } else if (this.value.length >= 6&&this.value.length < 9) {
        oSpan.innerHTML = "弱";
        oSpan.style.color = "red";
    }else{
        oSpan.innerHTML = "密码需要在6-24位之间";
        oSpan.style.color = "#ccc";
    }
}

onchange: 失去焦点时，内容发生变化时触发

oForm.user.onchange = function(){
    console.log(this.value);
}

自动获得焦点方法 oIn.focus();

3.BOM

BOM：Browser Object Model 浏览器对象模型

console.log(window); //窗口  js中最大的一个对象

//document和window
//window--窗口  js中最大的一个对象
//document--文档，html文档

//所有的全局函数和全局变量都属于window,一般会省略window

3.1 window提供的系统方法(了解)

3.1.1 系统提供的对话框

//警告框
alert("今天周末，考试吗?");

//带确认对话框 confirm("确认信息")  确定---true   取消---false
var is = confirm("是否删除好友");

//带输入的对话框  prompt("提示信息",默认值)  确定---输入的值  取消--null
var mes = prompt("请输入身高",140);
console.log(mes);

3.1.2 open与close

 <!-- open():打开一个新窗口，如果写在行间，需要添加window-->
<button onclick='window.open("https://www.taobao.com/")'>淘宝</button>
<button onclick='cOpen()'>ujiuye</button>
<button onclick="window.close()">关闭</button>
<script>

    function cOpen(){
    //open(url,target,设置窗口信息，是否取代原有页面在浏览记录中的位置)
    //url：地址
    //target：_self   _blank
    //有返回值，返回新窗口的window
    var newWindow = open("http://www.ujiuye.com","_blank","width:800px;height:800px");
    newWindow.alert("web1116,到此一游");
}
</script>

3.1.3 location

//file:///E:/web%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5/day10%20BOM/08%20location.html#div?wd=%E5%85%83%E6%97%A6&user=txf
console.log(location);
console.log(window.location.href); //设置访问当前窗口显示的url地址
console.log(location.hash); //哈希  #div
console.log(location.search);//搜索内容  #div?wd=元旦&user=txf
console.log(location.protocol); //协议 http  https
setTimeout(function(){
    //location.href = "http://www.ujiuye.com";
    location.reload();//刷新
},3000);

href：设置访问当前窗口显示的url地址，用于跳转到其他页面
search：获取搜索内容 (.html后面的)
hash：哈希 #div
protocol：协议
location.reload();//刷新

3.1.4 history

history.back() : 后退到上一个链接
history.forward()：前进到下一个链接

history.go(): 1：后退1个链接 -1：前进一个链接

<h1>第二个页面</h1>
<a href="./09 history03.html">第三个页面</a>
<button onclick="history.forward()">前进</button>
<button onclick="history.back()">后退</button>
<button onclick="history.go(-1)">go</button>

3.2 BOM三大系列（掌握）

3.2.1 client系列

元素可视宽高
- 元素.clientWidth:元素可视宽 content+padding
- 元素.clientHeight:元素可视高 content+padding

屏幕的可视宽高

document.documentElement.clientWidth;

/* 
 client系列（元素可视宽高）
    元素.clientWidth: 可视宽  content+padding
    元素.clientHeight: 可视高  content+padding
屏幕的可视宽高：
   document.documentElement.clientWidth/Height
*/
var oDiv = document.getElementsByTagName("div")[0];

console.log(oDiv.clientWidth);//元素可视宽
console.log(oDiv.clientHeight);//元素可视高

// 屏幕的可视宽高：
console.log(document.documentElement.clientWidth); //1366
console.log(document.documentElement.clientHeight);//657

3.2.2 offset系列

元素占位宽高
- 元素.offsetWidth: 元素占位宽 content+padding+border
- 元素.offsetHeight: 元素占位高 content+padding+border

元素位置

元素.offsetTop
元素.offsetLeft

/* 
offset系列(元素的占位宽高)
   标签.offsetWidth：元素的占位宽  content+padding+border
   标签.offsetHeight：元素的占位高

   标签.offsetTop: 获取元素的顶部到定位父元素的位置，如果没有定位父元素获取到body的位置
   标签.offsetLeft: 获取元素的左边到定位父元素的位置，如果没有定位父元素获取到body的位置
  一般用于获取当前元素在页面中的位置
*/
var oDiv = document.getElementsByTagName("div")[0];
var oP = document.getElementsByTagName("p")[0];

//元素的占位宽  content+padding+border
console.log(oDiv.offsetWidth); //240
console.log(oDiv.offsetHeight); //240

//标签.offsetTop: 获取元素的顶部到定位父元素的位置，如果没有定位父元素获取到body的位置
console.log(oP.offsetTop); //0

3.2.3 scroll系列

滚动事件：onscroll
窗口缩放事件：onresize
页面的滚动距离
- document.documentElement.scrollTop || document.body.scrollTop

/* 
scroll系列
   元素.scrollWidth/Height : 获取元素的实际内容宽
   元素.scrollTop: 元素被卷去的高
   元素.scrollLeft: 元素被卷去的宽
        
获取页面的滚动距离
   document.documentElement.scrollTop || document.body.scrollTop
*/
var oDiv = document.getElementsByTagName("div")[0];

//元素.scrollWidth/Height : 获取元素的实际内容宽
console.log(oDiv.scrollWidth);

//1.onscroll 添加滚动事件
oDiv.onscroll = function(){
    console.log(oDiv.scrollTop);
    console.log(oDiv.scrollLeft);
}

//2.给窗口添加滚动事件
window.onscroll = function(){
    //获取
    console.log(document.documentElement.scrollTop || document.body.scrollTop);
    document.documentElement.scrollTop = document.body.scrollTop = 0;
}

3.3 懒加载

//获取标签
var oImgs = document.getElementsByTagName("img");
// oImgs[0].src = oImgs[0].getAttribute("_src");


//2.默认显示第一屏图片  如果图片在屏幕的可视高度范围内就可以显示
var clientH = document.documentElement.clientHeight;
for (var i = 0; i < oImgs.length; i++) {
    if (oImgs[i].offsetTop <= clientH) {
        oImgs[i].src = oImgs[i].getAttribute("_src")
    }
}

//3.滚动到哪，加载到哪       添加滚动事件
window.onscroll = function () {
    //如果图片的位置 在 屏幕可视高+滚动卷去的高 的范围内容都可以显示
    var sT = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < oImgs.length; i++) {
        if (oImgs[i].offsetTop <= clientH+sT) {
            oImgs[i].src = oImgs[i].getAttribute("_src");
        }
    }
}