首页 > 其他分享 >BOM.DOM

BOM.DOM

时间:2022-12-06 20:12:52浏览次数:38  
标签:DOM 对象 标签 获取 let BOM document 属性

BOM,DOM,jQuery

BOM操作

全称: Browser OBject Model 指浏览器对象模型

window对象

window.open('网址','','width= px,height= px,left=200px')  # 打开新窗口
window.close()  # 关闭窗口
vavigator.userAgent  # 标识自己是一个浏览器

history对象

模拟浏览器的前进后退按钮

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

location对象

window.location.href   # 获取当前网址
window.location.href='网址'   # 跳转到后面的网址
# 刷新按钮
window.location.reload()  # 刷新当前页

弹框系列

# 警告框
alert('警告信息')
"弹框"

# 确认框
confirm('确认信息')  
"比较警告框多了一个确定与取消,并拥有返回值,确定=true  取消=false"

# 提示框
prompt('提升信息','可以+默认值')
"填写内容,并有确定与取消  取消=null"  

计时相关(重点)

用来编写定时任务。

一次性定时任务
setTimeout(showMsg,1000(毫秒))  # 开启一个定时任务
# 存储定时任务
let t = setTimeout(showMsg,1000(毫秒))
# 取消定时任务
cLearTimeout(t)

# 代码
<script>
  function showMsg(){
    alert('欢迎光临')
  }
  let t = setTimeout(showMsg,1500)  # 保存定时任务
  clearTimeout(t)  				  # 取消定时任务
</script>
循环定时任务
setInterval(showMsg,1000) # 每隔1000毫秒执行一次
# 保存定时任务
let t = setInterval(showMsg,1000)
# 清除定时任务
cLearInterval(t)

# 函数版
"定义一个循环定时任务函数"
  let t;
  function func(){
    alert('今天星期二')

  }
  t = setInterval(func,6000)
"用一个普通定时任务函数来结束这个循环任务"
 function inner(){
    clearInterval(t)
  }
  setTimeout(inner,12000)  # 时间达到12秒自动使用函数内清除定时功能

DOM操作

指文档对象模型,通过它可以访问HTML所有元素。

想通过JS代码来操作标签,先要学习如何查找标签,之后才可以给标签绑定一些JS代码(DOM操作)

DOM操作关键字: document

查找标签
注意事项:
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 
				标签名+Ele

# id查找
document.getElementById('id') # 通过id值获取标签
	结果是标签对象本身
let divEle = document.getElementByID('id')
"可以用一个变量名来接收这个查询标签 后面使用只需要引用这个变量名"

# 类查找
document.getElementsByClassName('class值')
	结果是数组 含有多个标签对象

# 标签查找
document.getElementsByTagName('标签名')
	结果也是一个数组 
间接查询
# 准备工作 需要基于一个标签来进行查询操作,通过.的方式
let divele = document.getElementByID('id')
parentElement            父节点标签元素
# 可以用 .的方式获取上一级父标签
children                 所有子标签
# 获取所有的儿子标签 可以加索引位获取单个
firstElementChild        第一个子标签元素
# 获取第一个儿子标签
lastElementChild         最后一个子标签元素
# 获取最后第一个儿子标签
nextElementSibling       下一个兄弟标签元素

previousElementSibling   上一个兄弟标签元素
节点操作
// js代码创建标签
let aEle = document.createElement('a')

// JS代码操作标签属性
aEle.href = 'http://www.baidu.com/'
setAttribute('属性名','属性值')   # 可以添加自定义属性与默认属性
// JS代码操作标签文本
aEle.innerText='这是百度你想啥呢'

// JS代码查找div标签并往div内部加入a标签
let divEle = document.getElementsByTagName('div')[0] 
divEle.appendChild(aEle)
// 把增加的节点放到某个节点的前边。 节点就是标签
divEle.insertBefore(aEle,某个节点);

注意事项: 
"""对于标签添加属性 只能添加一些默认属性,不能添加自定义属性"""



.innerText         // 可以获取标签内部所有文本
.innerText = '文本'  // 替换文本  不识别标签语法

.innerHTML         // 获取标签内部所有的HTML标签 包含文本
.innerHTML = '文本'    //  替换文本  识别标签语法
获取值操作(重点)
# 在JS中找到标签对象后可以通过.value 找到用户输入或选择的值
let inputEle = document.getElementsByTagName('input')[0]
inputEle.value

# 基于文件来说 .value 只能拿到 字符串内容是当前计算机文件路径(还是假的路径)
.files    # 获取文件
.files[0]  # 一个文件情况可以获取 文件对象
针对多个文件可以做for循环拿出来
class与css操作
JS操作CSS样式
查找到需要操作的标签后  标签对象.style.属性名(不需要下划线,编程小驼峰体)
标签对象.style.color= '颜色'       # 改颜色

标签对象.style.fontSize = '40px'    # 改字体大小

# 代码
let spanEle = document.getElementsByTagName('span')[0]
spanEle.style.color='red'
spanEle.style.fontSize='29px'
JS操作class
先获取标签对象(查找到需要操作的标签)
.classList   # 查看当前标签所有的class属性值
.classList.contains('属性值')  # 判断是否有 属性值
.classList.add('属性值')      # 添加属性值
.classList.remove('属性值')  # 删除属性值
.classList.toggle('属性值')    # 有则删 没有添加
事件(重点)

给标签添加一些自定义的功能.

onclick        当用户点击某个对象时调用的事件句柄。
onfocus        元素获得焦点。
onblur         元素失去焦点。
onchange       域的内容被改变。
绑定事件的多种方式
button 按钮标签

方式1 :
<button onclick="showMsg()">后背好痒啊</button>  #单机方式
function showMsg(){
    let msg = confirm('你想帮我挠挠吗');
    console.log(msg)
} 

方式2:
<input type="button" value="快挠挠吧" id="d1">
let inputEle = document.getElementById('d1');
inputEle.onclick = function(){
    alert('好舒服啊')

}
补充说明
 事件函数中的this(这个)关键字 通过打印操作可以帮助我们获取当前被触发事件的那个标签
"""必须使用在查询后     
   如果有嵌套的话必须先提前保存  let currentEle = this 防止后续变化"""
console.log(this.getAttribute('属性')) # 可以获取当前被触发事件的那个标签的属性的值
----------------------------------------------------------------------------------
<input type="button" value="快挠挠吧" id="1">
let inputEle = docment.getElementById('id');
inputEle.onclick = function(){
    let currentEle = this  # 如果有嵌套的话必须先提前保存防止后续变化
    console.log(this)  # 可以获取当前被触发事件的标签 
   # console.log(this.getAttribute('属性')) 
}

placeholder = '用户名' 可以设置 搜索框/登录框 默认显示的值
事件练习题
1. 搜索框 显示 默认值,当鼠标点击上去清空,鼠标离开 显示
<input type="text" value="飞机" id="d2">   // 设置搜索框默认显示
<script>
  let inputEle = document.getElementById('d2')
  inputEle.onfocus = function () {         //  元素获得焦点事件,就是鼠标点击上去时设置为空
    this.value=''
  }
  inputEle.onblur = function (){          //  元素失去焦点事件,就是鼠标点击别的地方设置为 大爷不要走
    this.value = '大爷,不要走'
  }
</script>
====================================================================================
2. 用户登录 登录时的用户名与密码不符 在输入框后方提示
<p>username:
    <input type="text" id="d1">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="d2">
    <span style="color: brown"></span>
</p>
<button id="suBtn">提交</button>

<script>
    //1.查找提交按钮
    let subEle = document.getElementById('suBtn')
    //2.给按钮绑定点击事件
    subEle.onclick = function () {
        //3.查找用户输入的标签并获取数据
        let userNameEle= document.getElementById('d1')
        let passWordEle = document.getElementById('d2')
        if(userNameEle.value === 'sb') {
            userNameEle.nextElementSibling.innerText = '用户名不可以sb哦'
        }
        if(passWordEle.value === '123') {
            passWordEle.nextElementSibling.innerText = '密码太简单了'
        }
    }
# 点击输入框修改用户名 提示消失 
    let userNameEle = document.getElementById('d1')
    userNameEle.onfocus = function (){
        userNameEle.nextElementSibling.innerText = ''
    }
    let passWordEle = document.getElementById('d2')
     passWordEle.onfocus = function (){
        passWordEle.nextElementSibl
===================================================================================
3. 选择省出现对应的市
<p>省:
    <select name="" id="d1">
        <option value="">请选择</option>
    </select>


</p>
<p>市:
    <select name="" id="d2"></select>

</p>
<script>
    let date = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
    }
    // 提前查找好省和市的select标签
    let proSeEle = document.getElementById('d1');
    let citySeEle = document.getElementById('d2');
    // 1.获取所有省的信息
    for (let pro in date) {
        //2.创建option标签
        let opTionEle = document.createElement('option');
        // 3.添加文本及属性
        opTionEle.innerText = pro;
        opTionEle.setAttribute('value', pro);
        // 4.将创号的option 标签添加到省下拉框内
        proSeEle.appendChild(opTionEle)

    }
    // 5.给省标签绑定文本域变化事件 onchange
    proSeEle.onchange = function () {
        // 每次操作前清空市数据不然会叠加显示
        citySeEle.innerHTML = '';
        // 6 获取用户选择的省信息
        let targetProData = proSeEle.value;
        // 按照获取到的省获取市的信息 字典[]
        let cityDataList = date[targetProData]
        // 7.循环获取市信息,创建option标签 添加到下拉框内
        for (let i = 0; i < cityDataList.length; i++) {
            let city0pEle = document.createElement('option');
            city0pEle.innerText = cityDataList[i];
            city0pEle.setAttribute('value', cityDataList[i]);
            citySeEle.appendChild(city0pEle)

        }
    }         

jQuery类库

简介

​ 一个轻量级的,兼容多浏览器的javaScript库。它的宗旨就是写的更少做的更多。

优点

1. 加载速度快
2. 选择器更多更好用
3. 一行代码走天下
4. 支持ajax请求
5. 兼容性强

导入方法

​ jQuery.com官网先下载核心文件到本地引入,没有网络依然可以使用。

​ CDN网络资源加载,必须依靠网络使用。

www.bootcdn.cn
https://www.bootcdn.cn/jquery/
# 1.本地引用:
打开源码复制到pycharm的JS文件内
再用script标签引入
# 2.网页引用:
不用复制源码直接把网页复制过去引入

使用方法

jQuery导入之后需要使用关键字才可以使用默认的关键字就是jQuery
jQuery 简化了关键字  使用 $ 

js代码与jQuery代码对比
    let pEle = document.getElementsByTagName('p')[0]
    undefined
    pEle.style.color = 'red'
    'red'
    pEle.nextElementSibling.style.color = 'green'

    $('p').first().css('color','yellow').next().css('color','blue')

标签对象与jQuery对象

在我们日常使用中可能在标签对象与jQuery对象 交互使用,需要提前弄清楚手上的是什么对象

标签对象不能通过.css的方式修改样式,也不能.first 或者.next
但是 也可以通过两者转换实现
	"标签对象转jQuery对象"		
    	$(标签对象)
 	"jQuery对象转标签对象"
    	jQuery对象[0]
let pEle = document.getElementsByTagName('p')
$(pEle) # 如果有多个标签就+上索引位

标签:DOM,对象,标签,获取,let,BOM,document,属性
From: https://www.cnblogs.com/LiaJi/p/16960373.html

相关文章

  • 前端开发 5 BOM操作与DOM操作
    今日内容详细目录今日内容详细BOM操作window的子对象navigator对象screeen对象history对象location对象弹出框警告框确认框提示框计时相关DOM操作查找标签操作节点获取值......
  • hdu3622 Bomb Game--2-sat & 二分
    原题链接:​​http://acm.hdu.edu.cn/showproblem.php?pid=3622​​题意:一个二维坐标系,n行数据,每行两个坐标算作一组,从n组跳出n点,画圆,半径一样,要求不能相交,可以相切,求最大半......
  • JS的BOM与DOM操作
    BOM与DOMBOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”。DOM(DocumentObjectModel)是指文档对象模型,通过它,可以访问HTML文档......
  • BOM操作 DOM操作 操作标签
    今日内容总结BOM操作(BrowserObjetModel)BOM是指浏览器对象模型它使JavaScript有能力与浏览器进行'对话'1.window.open() 打开一个网页 window.open('网址',......
  • JS之BOM/DOM和jquery类库简介
    目录BOM操作DOM操作查找标签操作节点获取值操作class与css操作事件事件实战案例jQuery类库标签对象与jQuery对象BOM操作JavaScript分为ECMAScript,DOM,BOMBOM(BrowserObj......
  • Vue的keep-alive、虚拟DOM的作用、diff算法
    一、keep-alive作用:keep-alive标签是vue的内置标签,可在组件切换过程中将状态保留在内存中,防止DOM重复渲染。标签属性:include:符合条件的组件会被缓存,exclude:符合条件的组......
  • 前端第五课---BOM操作与DOM操作与jQuery类库简介
    昨日内容回顾JavaScript简介1.发展史2.编程语言3.注释语法 4.引入方式 变量与常量var\let\const基本数据类型数值类型 Number字符类型 String布尔......
  • day37 操作bom对象,dom对象
    操作bom对象bom:浏览器对象模型window对象代表浏览器窗口 //window.alert(22)window.innerHeight//595window.innerWidth//131window.innerWidth//322......
  • React Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    报错信息umi.js:68474Warning:validateDOMNesting(...):<div>cannotappearasadescendantof<p>.其实不难看出是它提示你应该在p标签中写一个select这里造成错误......
  • 前端基础-04-BOM和DOM
    前戏到目前为止,我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法,并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互,我们......