day 46 前端基础之 BOM和 DOM

主要内容:https://www.cnblogs.com/liwenzhou/p/8011504.html

1 . Javascript 分为ECMAscript, DOM, BOM.

　　 BOM(Browser Object Model) 是指浏览器对象模型, 它使JavaScript又能努力与浏览器进行对话

　　 DOM(Document Object Model)是指文档对象模型, 通过它,可以访问html文档的所有元素.

　　 windows对象是客户端javascript最高层对象之一, 由于windows对象是其他大部分对象的共同祖先.windows对象的方法和属性, 可以省略windows对象的引用.

2 . window的子对象

　　navigator对象 : 浏览器对象, 通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息.

　　location对象: (重要) window.location 对象用于获得当前页面的地址,并把浏览器定向到新的页面

常用属性和方法:

location.href            //获取url
"https://www.sogo.com/"

location.href='url'      //跳转到指定页面
location.reload()        // 重新加载页面

　　history对象:  window.history对象包含浏览器的历史

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

　　弹出框: 在javascript中创建三种消息框:警告框 确认框 提示框

　　　　警告框: 经常用于确保用户可以得到某些信息.当警告框出现后,用户需要点击确定按钮才能进行操作.

alert(123)

　　　　确认框:  确认框用于使用户可以验证或者接受某些信息.

　　　　　　　　当确认框出现后, 用户需要点击确定后者取消按钮才能进行继续操作.点确认返回ture,否则else

confirm('que')
true
confirm('124')
false

　　　　提示框: 提示框常用提示用户在进入页面前输入某个值

prompt('请在下方输入','答案')
"答案"
prompt('请在下方输入','答案')
null

3 . 计时相关

　　a : 定义 : 通过使用javascript. 我们可以在一定时间间隔之后来执行代码, 而不是在函数调用后立即执行. 这称计时事件.

　　b : setTimeout           语法 : var  t = setTimeout('js语句', 毫秒)　

setTimeout(function jump(){alert(123)}, 3000)   # 第一种方式
function kk(){
	alert(123)
}
setTimeout(kk, 4000)                            # 第两种方式
2

　　　clearTimeout()      语法 :  clearTimeout( setTimeout_variable)

var timer = setTimeout(function(){
	alert(123);}, 3000);// 取消settimeout设置
clearTimeout(timer)

　　c : setInterval() 　　语法 : var  t = setTimeout('js语句',  时间间隔)

function an(){
	console.log(123)
}
setInterval(an, 1000)
1

　　　　clearinterval()

function an(){
	console.log(123)
}
var t2 = setInterval(an, 1000)
clearInterval(t2)

4 . 查找标签

　　1) 直接查找  

　　　　1. document.getElementById("id值") --> 找到具体的标签对象
　　　　2. document.getElementsByClassName("样式类名") --> 找到标签对象的数组
　　　　3. document.getElementsByTagName("标签名") --> 找到标签对象的数组

document.getElementById('i1')                        #根据id获取一个标签
<div id=​"i1">​div​</div>​
document.getElementsByClassName('c1')                #根据class属性获取

var c1Ele = document.getElementsByClassName('c1')
undefined
c1Ele
HTMLCollection(2) [p.c1, p.c1]
c1Ele[0]
<p class=​"c1">​p1​</p>​
c1Ele[1]

var c2e = document.getElementsByTagName('p')         #根据标签名获取标签合集
undefined
c2e[0]
<p class=​"c1">​p1​</p>​
c2e[0].innerText = 'biaoqian'                         # 修改文本内容
"biaoqian"

　　2 ) 间接查找

var d2 = document.getElementById('d2')
d2.children                                #所有子标签
HTMLCollection(3) [p, div#d3, p, d3: div#d3]
d2.firstElementChild                       #第一个子标签元素
<p>​d3前面的p标签​</p>​
d2.lastElementChild                        #最后一个子标签元素                
<p>​d3后面的p标签​</p>​
d3 = document.getElementById('d3')
<div id=​"d3">​div2​</div>​
d3.previousElementSibling                  #上一个兄弟标签
<p>​d3前面的p标签​</p>​
d3.nextElementSibling                      #下一个兄弟标签
<p>​d3后面的p标签​</p>​
parentElement                               父节点标签元素

innertext innerHTML的区别

d2.innerText
"d3前面的p标签

div2
d3后面的p标签"
d2.innerHTML
"
        <p>d3前面的p标签</p>
        <div id="d3">div2</div>
        <p>d3后面的p标签</p>
    "

5 . 节点操作

　　1 ) 创建节点和添加节点

　　追加一个子节点(作为最后的子节点)　: somenode.appendchild(newnode)

var pele = document.createElement('span') #创建一个节点
undefined
pele.innerText = '最美的太阳'
"最美的太阳"
d2.appendChild(pele)                       #追加一个子节点
<span>​最美的太阳​</span>​

　　把增加的节点放到某一个节点的前边: somenode.insertbefore(newnode, 某个节点)

var div1 = document.createElement('div')
undefined
div1.innerText = '张杰'
"张杰"

d2.insertBefore(div1, d3)
<div>​张杰​</div>​

　　实例二

var img1 = document.createElement('img');
undefined
img1.setAttribute('src','http://g.hiphotos.baidu.com/baike/pic/item/314e251f95cad1c8f1589f12723e6709c93d5127.jpg');
undefined
var i2 = document.getElementById('i2');
undefined
d2.appendChild(img1)
<img src=​"http:​/​/​g.hiphotos.baidu.com/​baike/​pic/​item/​314e251f95cad1c8f1589f12723e6709c93d5127.jpg">​

　2 ) 删除节点和替换节点

　　 删除节点的语法 : 获取要删除的元素, 通过父元素调用删除  removechild(要删除的节点)

　　 替换节点的语法 : somenode.replacechild(newnode, 某个节点)

var d2 = document.getElementById('d2')
undefined
var d3 = document.getElementById('d3')
undefined
d2.removeChild(d3)
<div id=​"d3">​div2​</div>​
div2 = document.createElement('div')
<div>​</div>​
d2.replaceChild(div2, d2)

　　文本节点: innertext不能识别标签都按照文本显示

　　　　　　  innerHTML能正常识别标签

d2.innerText = '<p>呵呵</p>'
"<p>呵呵</p>"            
d2.innerHTML = '<p>呵呵</p>'
"<p>呵呵</p>"                #在文本中显示'呵呵'

6 . 获取值操作

　　适用于以下标签:   input select  textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

7 class 的操作

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

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

　　例子:

var d1ele = document.getElementById('d1')

d1ele.className          获取所有样式类名
"c c1"
d1ele.classList
DOMTokenList(2) ["c", "c1", value: "c c1"]0: "c"1: "c1"length: 2value: "c c1"__proto__: DOMTokenList
d1ele.classList.remove('c1')  删除指定类
undefined
d1ele.classList.add           增加指定类
ƒ add() { [native code] }
d1ele.classList.add('c1')
undefined
d1ele.classList.contains('c1') 存在返回ture, 否则返回false
true
d1ele.classList.toggle('c1')   存在就删除, 否则添加
false
d1ele.classList.toggle('c1')
true

8 . 指定css操作

d1ele
<div id=​"d1" class=​"c c1">​</div>​
d1ele.style.backgroundColor = 'deeppink'
"deeppink"
d1ele.style.borderRadius= '3px'
"3px"

9 . 事件机制

　　1) 常用事件

复制代码
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

　　2 ) 例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        .c {
            height: 200px;
             200px;
            background-color: red;
            border-radius: 50%;
        }
        .c1 {
            background-color: green;
        }
    </style>

</head>
<body>
    <div id="d1" class="c c1"></div>
    <button  onclick="change()" id="b1">点我1</button>
    <input type="button" id="b2" value="点我2">
<script>
    function change() {
        var d1Ele = document.getElementById("d1");
        d1Ele.classList.toggle("c1");
    }

    // 通过JS给标签绑定事件
    var b2Ele = document.getElementById("b2");
    b2Ele.onclick=function () {
        console.log(this);
        // this表示触发事件的标签本身
        var d1Ele = document.getElementById("d1");
        d1Ele.classList.toggle("c1");
    }
</script>

</body>
</html>

　　3 )  input框获取焦点和失去焦点事件

<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<input type="text" id="i1" value="对子哈特">
<script>
    // 找到要绑定事件的标签
    var i1Ele = document.getElementById("i1");
    // 1. 先绑定获取焦点的事件
    i1Ele.onfocus = function (ev) {
        // 当输入框获取焦点之后要做的事儿
        this.value = "";
    };
    // 2. 绑定失去焦点的事件
    i1Ele.onblur = function (ev) {
        this.value = "对子哈特";
    }
</script>
</body>
</html>

10 select联动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<label for="s1"></label>
<select name="" id="s1">
    <option value="01">省</option>
</select>

<label for="h1"></label>
<select name="" id="h1">
    <option value="01">市</option>
</select>


<script>
    var data = {
        '北京':['昌平区','海定区','朝阳区'],
        '上海':['浦东新区','徐汇区']
    };

     var s1ele = document.getElementById('s1');
     var h1ele = document.getElementById('h1');
     //拿到所有的省, 在s1中生成对应的option选项
     for(var i in data){
         //创建option标签
         var opt = document.createElement('option');
         //把信息加入到标签中
         opt.innerText = i;
         //把创建好的标签加入第一个select标签中
         s1ele.appendChild(opt)
    }
    //拿到所有的市, 在h1中生成对应的option选项
    
    
    //当第一个select框的值发生变化是的时候触发的动作
    s1ele.onchange = function () {
         // 0 清空第二个select框里的内容
        s2ele.innerText = ''; 
        // 1. 先获取用户选中的省
        var p = this.value;
        var cityarray = data[p];
         for (var j in cityarray){
        //生成空的option
             var opt1 = document.createElement('option');
        //往optin里添加内容
             opt1.innerText = cityarray[j];
        //把生活才能的option追加到select标签中
            h1ele.appendChild(opt1);
    }

    }

</script>
</body>
</html>