标签：span 对象标签 Javascript 操作 div showMsg

内容概要

BOM操作
- BOM操作基础
DOM操作
jQuery类库

BOM操作

BOM操作基础

BOM(Browser Object Model) 是指浏览器对象模型，它使用Javascript有能力与浏览器进行'对话'

打开新网页
window.open('http://www.baidu.com') 并且可以填写参数控制打开新网页的大小
window.open('http://www.baidu.com','','width=200px,height=200px')
关闭当前浏览器窗口
window.close()
标识自己是一个浏览器
navigator.userAgent

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'

前进一页
history.forward()
后退一页
history.back()
获取当前页面所在的网址,也可以再加赋值符号和网址跳转
window.location.href

'chrome-extension://nnnkddnnlpamobajfibfdgfnbcnkgngh/newtab/index.html'

刷新当前页面

window.location.reload

警告框

alert()

确认框

confirm()

提示框

prompt()

计时相关操作

1.定时执行任务setTimeout

let time = setTimeout(showMsg,2000) // 2000毫秒(2秒)之后执行showMsg函数
clearTimeout(time) // 取消计时任务
例：
function showMsg(){
	confirm('你好')
}
let notice = setTimeout(showMsg,2000)
notice

2.定时重复执行setInterval

let time = setInterval(showMsg,2000)  //每次间隔2000毫秒(2秒)执行一次showMsg函数
clearIntervals(time)  // 取消重复任务
例：
function showMsg(){
	confirm('你好')
}
let time = setInterval(showMsg,2000)
time

DOM操作

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

DOM操作是通过JS代码来操作标签，所以我们需要先学习如何使用JS代码查找标签
之后我们才能给一些标签绑定JS代码(DOM操作)

查找标签

// 1.在JS中 变量名的命名风格推荐为驼峰体(小驼峰 => showMsg)
// 2.JS中查找到的HTML标签如果需要反复使用可以通过变量名来进行接收！ 规律为： xxxEle /*Elements（元素）*/

我们写一些html代码辅助我们演示下面的查找标签功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <span>span</span>
    <span>span</span>
    <div id="d1">div
        <span>div>span</span>
        <p class="c1">div>p
            <span>div>p>span</span>
        </p>
        <span>div>span</span>
    </div>
    <span>span</span>
    <span>span</span>
</body>
</html>

页面样式

ID查找器

document.getElementById('d1')


因为id在标签中是唯一的，所以Element不需要加s复数

结果就是标签对象本身

类名查找器

document.getElementsByClassName('c1')

结果是数组里面含有多个标签对象

标签查找器

document.getElementsByTagName('span')

结果是数组里面含有多个标签对象

还有比较多的查找方式，不一个一个演示了！

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

操作节点(标签)

创建一个标签

let spEle = document.createElement('span')

给标签添加默认属性

spEle.className('s2')

只能添加默认的属性

兼容默认属性和自定义属性

spEle.setAttribute(name,'xiaoming')

操作标签内部文本内容

spEle.innerText('牛郎织女66')

将某个标签追加到标签内部

let divEle = document.getElementsByTagName('div')[0] //因为查询到的是数组，所以需要通过索引取值第一个div标签

divEle.appendChild(spEle) // 将刚刚在测试的标签spEle添加进入div标签

方法名	说明
innerText	获取标签内部所有的文本内容
innerText = '文本'	替换/设置标签内部的文本(不识别标签语法)
innerHTML	获取标签内部所有的标签包含文本
innerHTML = '文本'	替换/设置标签内部的文本(识别标签语法)

获取值操作

同样的我们先编写一下关于获取值操作的html代码，方便我们接下来的演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <p>username:
            <input type="text" id="username">
        </p>
        <p>action:
            <select name="" id="action">
                <option value="上天">1</option>
                <option value="下地">2</option>
                <option value="入海">3</option>
            </select>
        </p>
        <p>file:
            <input type="file" id="文件">
        </p>
    </form>
</body>
</html>

针对用户输入的和用户选择的标签

标签对象.value

针对用户上传的文件数据

标签对象.value

标签对象.files

标签对象.files[0]

需要通过此方法获取文件对象，如果有多选的文件对象会自动组成数组！需要通过索引来获取文件对象。

class与css操作

1.js操作标签css样式
	标签对象.style.属性名(下划线没有 变成驼峰体)
2.js操作标签class属性
	 标签对象.classList.add()
  	 标签对象.classList.contains()
    标签对象.classList.remove()
    标签对象.classList.toggle()

标签：span,对象,标签,Javascript,操作,div,showMsg
From： https://www.cnblogs.com/ddsuifeng/p/16956028.html

Javascript