BOM,DOM

时间 2019-11-13

标签 bom dom 栏目 HTML 繁體版

原文原文链接

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

　　DOM （Document Object Model）是指文档对象模型，经过它，能够访问HTML文档的全部元素。html

一.BOM对象

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

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() 每隔一段时间执行一次,重复执行app

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

清除计时器dom

clearInterval(b);

二.DOM对象

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

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

　　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 {
            width: 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>