BOM,DOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

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

一.BOM对象

一些常用的Window方法：（在浏览器调试器的console里面输入下面这些属性或者方法，就能看到对应的效果）

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)

1.history对象

history.forward()  // 前进一页，其实也是window的属性，window.history.forward()
history.back()  // 后退一页

2.location对象

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面

3.弹出框(了解)

alert("hello world")  #警告框
confirm("请点击确认")   #确认框必须点确认才能下一步
prompt("请在下方输入","你的答案")   #提示框

4.计时相关

定时器

setTimeOut()  一段时间之后执行某个内容,执行一次

var a = setTimeout(function f1(){confirm("are you ok?");},3000);
var a = setTimeout("confirm('xxxx')",3000);  单位毫秒

清除定时器

clearTimeout(a);

setInterval() 每隔一段时间执行一次,重复执行

var b = setInterval('confirm("xxxx")',3000);

清除计时器

clearInterval(b);

二.DOM对象

　　DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

　　HTML DOM 模型被构造为对象的树。

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

　　JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）

2.1查找标签

想操作标签需要先找到它 很少用jq有更好的操做

直接查找

document.getElementById           #根据ID获取一个标签
document.getElementsByClassName   #根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     #根据标签名获取标签合集

<!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');

间接查找(jq有更好的)

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

操作:

var divEle = document.getElementById('d1');
找父级:divEle.parentElement;
找儿子们:divEle.children;
找第一个儿子:divEle.firstElementChild;
找最后一个儿子:divEle.lastElementChild;
找下一个兄弟:divEle.nextElementSibling;

2.2标签操作

创建标签:重点

var aEle = document.createElement('a');

添加标签

<!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>
</div>
<div class="c1 c2">div2</div>


</body>
</html>

追加一个子节点（作为最后的子节点）标签里面的最后一个子节点

var divEle = document.getElementById('d1')  #找到d1标签
divEle.appendChild(aEle)  #插入到最后

把增加的节点放到某个节点的前边

var divEle = document.getElementById('d1'); 找到父级标签div
var a = document.createElement('a');  创建a标签
a.innerText = 'baidu';  添加文本内容
var span1 = document.getElementById('s1'); 找到div的子标签

divEle.insertBefore(a,span1); 将a添加到span1的前面

删除节点

示例: 删除span2标签
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);

替换节点：

somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉

2.3文本节点操作

获取文本节点的值

var divEle = document.getElementById("d1")
divEle.innerText  #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML  #获取的是该标签内的所有内容，包括文本和标签

设置文本的值

var div1 = document.getElementById('d1');
div1.innerText = 'xxx';
div1.innerText = '<a href="">百度</a>';
div1.innerHTML = '<a href="">百度</a>';

2.4属性操作

attribute操作

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;  #获取input输入的值
设置值
inpEle.value = 'alexDsb';

select选择框

获取值
var selEle = document.getElementById('city');
selEle.value;
设置值
selEle.value = '1';

<!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>
</div>
<div class="c1 c2">div2</div>
用户名:<input type="text" id="username">
<select name="city" id="city">
  <option value="1">北京</option>
  <option selected="selected" >上海</option>
  <option value="3">广州</option>
  <option value="4">深圳</option>
</select>


</body>
</html>

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.7css设置

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

设置值:
divEle.style.backgroundColor = 'yellow';
获取值
divEle.style.backgroundColor;

2.8事件

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

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

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

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

简单示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .cc1 {
             100px;
            height: 100px;
            background-color: red;
        }
    </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>

2.9绑定事件的方式

方式一：（已经不常用了，多数用方式二了）

<div id="d1" onclick="changeColor(this);">点我</div>  
<script>  
  function changeColor(ths) {  
    ths.style.backgroundColor="green";
  }
</script>

方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
　　 //console.log(this)
    this.innerText="呵呵"; //哪个标签触发的这个事件，this就指向谁
  }
</script>

</body>
</html>

例题城市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>
<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");
  //页面一刷新就将所有的省份都添加到select标签中
  for (var i in data) {
    var optionP = document.createElement("option"); //创建option标签
    optionP.innerHTML = i; //将省份的数据添加到option标签中
    p.appendChild(optionP);//将option标签添加到select标签中
  }
  //只要select中选择的值发生变化的时候，就可以触发一个onchange事件，那么我们就可以通过这个事件来完成select标签联动
  p.onchange = function () {
    //1.获取省的值
    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是当前选择的option标签的索引位置，this.options是获取所有的option标签，通过索引拿到当前选择的option标签对象，然后.innerHTML获取对象中的内容，也就是省份
    //还可以这样获取省：var pro = this.value;
    var citys = data[pro]; //2. 通过上面获得的省份去data里面取出该省对应的所有的市
    // 3. 清空option
    c.innerHTML = ""; //清空显示市的那个select标签里面的内容
　　

    //4.循环所有的市，然后添加到显示市的那个select标签中
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>

</body>
</html>