前端06 /JavaScript之BOM、DOM

时间:2021-12-28 10:50:12

前端06 /JavaScript

昨日内容回顾

js的引入

方式一:
<script>
js代码
</script> 方式二:
<script src='xxxx.js'></script>

js的编程要求

结束符 ;
注释 // 单行注释
/*多行注释*/

变量

声明 var
变量的命名 : 数字 字母 下划线 $
不能用js中的保留字

输入输出

alert('弹出的警告框')
console.log('在控制台里打印') var inp = prompt('请输入内容 :')

基础数据类型

number
整数和小数都属于number类型
toFixed(2) 保留两位小数
string
'字符串'   "字符串"
属性 :length
方法 :trim(),concat('str'),charAt(索引),indexOf(元素),slice(start,end),split(sep,返回前n个值)
toLowerCase(),toUpperCase()
boolean
true  [] {}
false undefined null NaN 0 ''

null

设置为空

undefined

未定义 当一个变量只声明 不赋值的时候

转换

parseInt('123') 字符串转数字
parseFloat('1.235') 字符串转小数
String(undefined) 小数转字符串(推荐)
var a = 123
a.toString() 数字转字符串
Boolean(数据类型) 任意类型转换成boolean

内置对象类型

array
var a = [1,2,3,4]
var a = new Array([1,2,3,4])
属性:length
方法:push() pop() shift() unshift()
slice() reverse() join('sep') sort() splice(1,2,'新的值') concat()
自定义对象
var obj = {'alex':'name'} //对象
json数据类型序列化
'{"key":18,"123":[1,2,3]}'
自定义对象 = JSON.parse(json字符串)
json字符串 = JSON.stingify(自定义对象)

运算符

算数运算符 : + - * / ** % ++ --    var b = ++a  varb = a++
赋值运算符 : = += -= *= /= %=
比较运算符 : > < >= <= == != === !==
逻辑运算符 : &&与 ||或 !非

流程控制

条件判断
if(条件){
//满足条件之后要执行的代码
}else if(条件){
//满足条件之后要执行的代码
}else{
//都不满足之后要执行的代码
} switch(值){
case 值1:
代码;
break
case 值2:
代码;
break
default:
代码
}
循环
while(条件){
循环体
} for(var i=0;i<10;i++){
循环体
} for(i in arr){
i是索引,arr[i]是具体的值
} for(vari=0;i<arr.length;i++){
i是索引,arr[i]是具体的值
}
三元运算符
var 值 = 条件 ? 条件为true返回的内容:条件为false返回的内容

函数

function 函数名(参数){
函数体
return 返回值 //返回值的个数必须是一个,如果返回多个值,放在数组中返回
}
函数名(参数)
arguments 函数中内置的动态单数,可以接收所有的参数 匿名函数
var 变量名 = function(参数){
函数体
return 返回值
}
自调用函数
(function(形参){
函数体
return 返回值
})(实参)

今日内容

1.BOM

location对象
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面 定时器
1. setTimeOut() 一段时间之后执行某个内容,执行一次
示例
var a = setTimeout(function f1(){confirm("are you ok?");},3000);
var a = setTimeout("confirm('xxxx')",3000); 单位毫秒
清除计时器
clearTimeout(a);
2.setInterval() 每隔一段时间执行一次,重复执行
var b = setInterval('confirm("xxxx")',3000);单位毫秒
清除计时器
clearInterval(b);

2.DOM

2.1 什么是dom

document object modle 文档对象模型
整个文档就是一颗树
树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息
在页面上还有一些动作效果:
根据人的行为改变的 点击 鼠标悬浮
自动在改变的

2.2 js是怎么给前端的web加上动作的呢?

1.找到对应的标签
2.给标签绑定对应的事件
3.操作对应的标签

2.3 查找标签

1.直接查找
var a = document.getElementById('baidu')           //根据ID获取一个标签,直接返回一个元素对象
console.log(a)
var sons = document.getElementsByClassName('son') //根据class属性获取,返回元素组成的数组
console.log(sons)
sons[0] //获取到一个标签对象
var divs = document.getElementsByTagName('div') //根据标签名获取标签合集,返回元素组成的数组
console.log(divs) 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
</div> <div class="c1 c2">
div2
</div>
</body>
</html> 操作:
var divEle = document.getElementById('d1');
var divEle = document.getElementsByClassName('c1');
var divEle = document.getElementsByTagName('div');
2.间接查找
parentElement            父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div class="c1" id="d1">
are you ok? <span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div> <div class="c1 c2">
div2
</div>
</body> 操作:
var divEle = document.getElementById('d1');
找父级:divEle.parentElement;
找儿子们:divEle.children;
找第一个儿子:divEle.firstElementChild;
找最后一个儿子:divEle.lastElementChild;
找下一个兄弟:divEle.nextElementSibling;
3.标签操作
创建标签:重点
var aEle = document.createElement('a');
//aEle就是一个新创建出来的标签对象 添加标签
追加一个子节点(作为最后的子节点)
somenode.appendChild(newnode);
示例:
var divEle = document.getElementById('d1')
divEle.appendChild(aEle) 把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
示例:
var divEle = document.getElementById('d1'); 找到父级标签div
var a = document.createElement('a'); 创建a标签
a.innerText = 'baidu'; 添加文本内容
var span2 = document.getElementById('s2'); 找到div的子标签span2
divEle.insertBefore(a,span2); 将a添加到span2的前面 html文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div class="c1" id="d1">
are you ok? <span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div> <div class="c1 c2">
div2
</div> </body>
</html>
删除节点
获得要删除的元素,通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
示例: 删除span2标签
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);
替换节点:
somenode.replaceChild(newnode, 某个节点);
somenode是父级标签,然后找到这个父标签里面的要被替换的子标签,然后用新的标签将该子标签替换掉
标签的复制
节点.cloneNode()     //只克隆一层
节点.cloneNode(true) //克隆自己和所有的子子孙孙
注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
4.文本节点操作
var divEle = document.getElementById("d1")
divEle.innerText #输入这个指令,一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML #获取的是该标签内的所有内容,包括文本和标签
取值示例:
div2.innerText; 不识别标签
"are you ok? span1 span2 span3"
div2.innerHTML; 识别标签
"
are you ok? <span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
"
设置值:
var div1 = document.getElementById('d1');
div1.innerText = 'xxx';
div1.innerText = '<a href="">百度</a>';
div1.innerHTML = '<a href="">百度</a>';

2.4 属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age") // 自带的属性还可以直接.属性名来获取和设置,如果是你自定义的属性,是不能通过.来获取属性值的
imgEle.src
imgEle.src="..." 示例:
<a href="http://www.baidu.com">百度</a>
操作
var a = document.getElementsByTagName('a');
a[0].href; 获取值
a[0].href = 'xxx'; 设置值

2.5 获取值操作

输入框 input
获取值
var inpEle = document.getElementById('username');
inpEle.value;
设置值
inpEle.value = 'alexDsb'; select选择框
获取值
var selEle = document.getElementById('select1');
selEle.value;
设置值
selEle.value = '1';

2.6 类操作

className  获取所有样式类名(字符串)

首先获取标签对象
标签对象.classList; 标签对象所有的class类值 标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加,toggle的意思是切换,有了就给你删除,如果没有就给你加一个 示例:
var divEle = document.getElementById('d1');
divEle.classList.toggle('cc2');
var a = setInterval("divEle.classList.toggle('cc2');",30); 判断有没有这个类值的方法
var divEle = document.getElementById('d1');
divEle.classList.contains('cc1');

2.7 css设置

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可 设置值:
divEle.style.backgroundColor = 'yellow';
获取值
divEle.style.backgroundColor;

3.事件

简单示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.cc1 {
width: 100px;
height: 100px;
background-color: red;
}
.cc2{
background-color: green;
} </style>
</head>
<body> <div class="cc1 xx xx2" id="d1"> </div> <script>
var divEle = document.getElementById('d1');
divEle.onclick = function () {
divEle.style.backgroundColor = 'purple';
} </script>
</body>
</html>

绑定事件的方式

方式1:
<script>
var divEle = document.getElementById('d1'); 1.找到标签
divEle.onclick = function () { 2.给标签绑定事件
divEle.style.backgroundColor = 'purple';
}
</script> 下面的this表示当前点击的标签
var divEle = document.getElementById('d1');
divEle.onclick = function () {
this.style.backgroundColor = 'purple';
} 方式2
标签属性写事件名称=某个函数();
<div class="cc1 xx xx2" id="d1" onclick="f1();"></div> <script>
js里面定义这个函数
function f1() {
var divEle = document.getElementById('d1');
divEle.style.backgroundColor = 'purple';
}
</script> 获取当前操作标签示例,this标签当前点击的标签
<div class="cc1 xx xx2" id="d1" onclick="f1(this);"></div>
function f1(ths) {
ths.style.backgroundColor = 'purple';
} 绑定方式:
<button id="btn">点击一下</button>
方式一:
var btn = document.getElementById('btn')
btn.onclick = function () {
alert('点我干嘛')
}
方式二:
btn.onclick = clik
function clik() {
alert('不要点')
}
方式三:
<button id="btn" onclick="clik()">点击一下</button>
function clik() {
alert('不要点')
}