js里BOM和DOM操作

BOM对象浏览器对象模型: Browers object model js操作浏览器对象模型

弹框: 两种方式

alert('xx');

confirm('are you sure?')

location对象

location.href;  获取当前页面的地址
location.href = 'http://www.baidu.com'; 跳转到这个网址上
location.reload();  刷新当前页面

计时器

第一种:一段时间之后执行某个任务
    设置:var t = setTimeout(function(){confirm("are you ok")},5000);
        var t = setTimeout("console.log('xxx')",1000);
        t就是浏览器用来记录你的计时器的标识数字
    清除:clearTimeout(t)
第二种:每隔一段时间执行某个任务
    设置:var t = setInterval(function(){confirm('弹个框!!')},3000);
    清除:clearInterval(t);

定时变化效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            background-color: red;
            }

        .c2{
            background-color: green;
            }

    </style>
</head>
<body>
<div class="c1" id="d1"></div>

</body>
<script>
    var t = setInterval(function(){
        var d = document.getElementById('d1');
        d.classList.toggle('c2')
        },100)

</script>

</html>

DOM对象: Document object model js操作我们HTML文件(包括文件中的所有元素、属性等等)

直接查找选择器

html代码:
    <div class="c1" id="d1"></div>
    <div class="c1 c2" id="d2"></div>
css代码:
       .c1{
            background-color: green;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: red;
            /*height: 100px;*/
            /*width: 100px;*/
            color:red;
        }

按标签名查找: var divEle = document.getElementsByTagName('div');
按id值查找:  var d1 = document.getElementById('d1');
            示例: d1.style.height = '600px';
按类值查找:var a = document.getElementsByClassName('c1');
示例：
var d2 = document.getElementsByClassName('c1');
d2.style.color = 'green';  
报错：因为得到的是多个标签对象，会放到一个数组里面，也就是得到的d2是个标签数组对象，里面比普通数组多了一些其他的属性
    VM1527:1 Uncaught TypeError: Cannot set property 'color' of undefined
    at <anonymous>:1:16

所以需要循环来设置标签效果
for (var i in d2){console.log(d2[i])};  直接循环数组不好，因为有其他属性干扰
  VM1658:1 <div class="c1" id="d1" style="color: red;">div1</div>
  VM1658:1 <div class="c1" id="d2">div2</div>
  VM1658:1 2
  VM1658:1 ƒ item() { [native code] }
  VM1658:1 ƒ namedItem() { [native code] }
  
需要下面的方式进行循环
for (var i=0;i<d2.length;i++){console.log(i,d2[i])};

也可以通过索引取值
d2[0];

间接查找选择器

var div1 = document.getElementsByClassName('c1')[0]; 
div1.nextElementSibling.style.color = 'red';  找下一个兄弟标签,并改了色
div1.previousElementSibling;  找上一个兄弟
div1.firstElementChild;  找第一个儿子
div1.lastElementChild;  找最后一个儿子
div1.children;  找所有儿子,是一个数组
div1.parentElement;  找到自己的父级标签

文本操作

innerText
    获取文本:
        var a = document.getElementById('jd')
        a.innerText;  只获取文本内容
    设置文本:
        a.innerText = '<a href="">天气</a>';不能识别标签,单纯的文本内容显示
innerHTML
    获取文本    
        var d = document.getElementsByClassName('c1')[0];
        d.innerHTML;  获取的内容包含标签 ("&lt;a href=""&gt;天气&lt;/a&gt;")
    设置文本:
        d2.innerHTML = '<a href="">天气</a>'; 能够识别标签,生成标签效果

value值操作

input标签
    html:
        <input type="text" name="username" id="username" >
    示例:
        var inp = document.getElementById('username'); 找到标签
        inp.value;  获取值
        inp.value = "你是谁,胆敢动我的网站";  修改值

class类值操作

var div1 = document.getElementById('d1');
div1.classList;  // 获取标签类值
div1.classList.add('c2'); // 添加类值
div1.classList.remove('c3'); // 删除类值
div1.classList.toggle('c3');  // 有就删除,没有就添加
var t = setInterval("div1.classList.toggle('c3')",1000);  //定时器添加

style样式操作

var div1 = document.getElementById('d1');
div1.style.color = 'green';
//当css属性名称有-的时候，需要去掉-，并且后面单词的首字母大写
div1.style.backgroundColor = 'green';

HTML的label标签补充

<label >用户名: 
        <input type="text" name="username" id="username">
    </label>
    
    <label for="password">密码: </label>
    <input type="password" name="password" id="password">

button补充

普通按钮,没有提交效果
<input type="button">
<button type="button">注册</button>

下面两个能够提交form表单数据
<input type="submit" value='登录'>
<button type="submit">注册</button>

示例：
<!--<label for="username">用户名</label>-->
<form action="http://www.baidu.com">
    <label>
        用户名
        <input type="text" id="username" name="username">
    </label>

<!--    <input type="submit">-->
<!--    <input type="button" value="普通按钮">-->
<!--    <button type="submit">button提交</button> 默认type="submit"，也可以触发提交数据的动作-->
<!--    <button type="button">button提交</button> type="button"普通按钮-->
</form>
<!--在form标签外面都是普通按钮-->
<input type="submit">
<button>xxx</button>

日期对象：

var timer = new Date(); //获取当前时间日期对象
timer.toLocaleString(); // 将日期时间对象转换为国人能够认识的时间日期字符串

下面的内容，目前作为了解：
//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  #月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示


常用方法
var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
//getMonth ()               获取月（0-11,0表示1月,依次类推）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜),时间戳

事件: DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被触发，就会执行对应代码。

常见事件

onclick，单击时触发事件
ondblclick，双击触发事件
onchange，内容修改时触发事件
onfocus，获取焦点时触发事件
onblur，失去焦点触发事件

绑定事件的两种方式:

方式1
<div class="favor" onclick="doFavor(this);">赞</div>
function doFavor(self) {
    self.style.backgroundColor='aqua';
        ...
}

方式2
<div class="favor">赞</div>
var dEle = document.getElementsByClassName('.favor')
dEle.onclick = function(){
    this.style.backgroundColor='aqua';
    ...
}

事件小案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
        .c1 {
            width: 100px;
            height: 30px;
            background-color: #ff55;
        }

    </style>
</head>
<body class="b1">

<select name="" id="city">
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3">深圳</option>
</select>
<br>
城市:
<div class="c1" id="d1">
</div>
<br>
<input type="text" id="username">

</body>
<script>


var d = document.getElementById('city')
//1 找到select标签，绑定change事件
d.onchange = function(){
    //this.options是select标签下面的所有option标签
    //this.selectedIndex是选中的select标签下面的option标签的索引值
    var option_text = (this.options[this.selectedIndex]).innerText;
    var d1 = document.getElementById('d1');
    d1.innerText = option_text;
}

//打印输入内容
var inpEle = document.getElementById('username')
inpEle.onchange = function(){
    console.log(this.value)}

//设置获得光标的背景颜色
inpEle.onfocus = function(){
    this.style.backgroundColor = 'aqua'};

//设置失去光标的背景颜色
inpEle.onblur = function(){
    this.style.backgroundColor = 'red'};

</script>

</html>

创建标签和添加标签案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            border: 1px solid red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>

<div id="d1">

</div>
<button id="btn">添加a标签</button>

</body>
<script>
    var btn = document.getElementById('btn');
    var d1 = document.getElementById('d1');
    btn.onclick = function () {
        //清空标签
        d1.innerText = '';
        // 1创建a标签
        var aEle = document.createElement('a'); //创建标签
        aEle.href = 'http://www.baidu.com'; //添加属性
        // img.src = '图片路径'
        aEle.innerText = '百度';
        // console.log(aEle);
        d1.appendChild(aEle) //给某个标签添加元素（内部尾部追加）
    }
</script>
</html>

posted on 2020-07-02 16:31 fdsimin 阅读(117) 评论(0) 编辑收藏举报

js里BOM和DOM操作

BOM对象 浏览器对象模型: Browers object model js操作浏览器对象模型

DOM对象: Document object model js操作我们HTML文件(包括文件中的所有元素、属性等等)

BOM对象浏览器对象模型: Browers object model js操作浏览器对象模型