js 之 BOM 和 DOM

一,   widow对象是javaScript中最高层对象之一,       window是其他大部分对象的共同祖先,       在调用属性和方法时可以省略window

        理解:          在javaScript中生成的任意对象都是window的子对象,也包括BOM和DOM生成的对象

       BOM         (Brower Object Model    浏览器对象模型,)          实现了js与浏览器之间的交互

　　DOM         (Document Object Model   文档对象模型)           通过它可以访问html中的所有标签元素

了解的一些方法:  (不加window直接用也行)

　　                     window.innerHeight - 浏览器窗口的内部高度                   window.innerWidth - 浏览器窗口的内部宽度

           　　　　   window.open() - 打开新窗口                  　　　　　　　  window.close() - 关闭当前窗口 

　　　　　　　   navigatior.appName        查看浏览器名字                              navigator.appVersion      查看浏览器厂商和版本详情

　　　　　　　　navigator.userAgent       查看客户端绝大部分信息              navigator.platform       查看浏览器运行的操作系统

　　　　　　　　screen.availWidth           查看可用的屏幕宽度                      screen,availHeight        查看可用的屏幕高度

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

　　　弹出框;　 alert("字符串")     ==>警告框             询问用户确认某某信息,,   需要点确定才能继续i

　                       confirm("字符串")    ==>确认框          询问需要某某信息         点击确认返回ture,点击取消返回false

                           prompt("字符串")     ==>提示框          提示用户输入某某信息的弹出框      确认则返回 输入值,不输则返回空,取消则返回null

BOM:     常用:     location(对象)                         location.herf                      获取URL,获取当前页面的url

              　　　　　　　　　　　　　　　 　  location.herf = 'URL'         跳转到指定的页面

　　　　　　　　　　　　　　　　　　　　　location.reload()              重新加载页面

              计时相关:　 宗旨是在隔一定的时间间隔之后来来执行代码　　　　　　　                                   

　　　　定时执行　　　　 setTimeout ("js语句",毫秒)                                      如:  var a = setTimeout (function() {return 5},3000)         

                                          第一个参数可以是个字符串,则返回值是字符串(?)         第二个参数是时间          1000ms=1s                            疑问:字符串如何获得返回值

                                          对函数的调用,   注意如果是函数,则执行返回函数的返回值,,若没有返回值则返回计数(定时运行次数)

　　　　　　　　　　　　clearTimeout(设置的定时器变量)     注意:  打断定时命令,用在计时状态,用来打断计时

　　　循环定时执行   　　  setInterval("js语句",时间间隔)                                      如:   var a = setInterval(function() {console.log(5)},3000) 

 　　　　　　　　　　　　setInterval()  会循环计时来调用函数或者计算     ,返回的ID值作为打断参数,     如 :     clearInterval(a) 加回车    就能打断循环计时

　　　　　　　　

 DOM;       常用:

                一,查找标签:   直接查; 1, document.getElementById()      根据 id 获得标签, 括号内是id的值,     

　　　　　　　　　　　　　　                 如:  var  s =  document.getElementById('c1')           s.value  ==>就能获得标签的属性内容      s.value='c2'    ===>修改标签属性值内容

　　　　　　　　　　　　　　　　　　　　　　  s2 = document.getElementById('c1') .innertext = 'c2'　  ===>修改标签之间的文本内容

　　　　　　　　　　　　　　　　　　　　         s.classlist         ===>获取的是类的对象.包含全部的类元素              s.classlist.remove('c1')   ==>移除类中的元素c1

　　　　　　　　　　　　　　　　　　　　          s.classlist.add('c1')    ===>类中添加新元素

　　　　　　　　　　　　　2,document.getElementsByClassName()      根据class属性获取标签 ,括号内是类属性的值 

　　　　　　　　　　　　　　　　　  　如:  var s =  document.getElementsClassName('c1')      

　　　　　　　　　　　　　　　　　　　　s.className      ==>  注意:返回的是个数组(列表),通过索引就能取值 ,   查到所有的含 c1 的标签

                          　　　　　　　　　　　　　s[0].innerText = c2   ==>修改标签之间的文本内容　　　　　　

　　　　　　　　　　　　　3.doctument.getElementsByTagName()         根据标签元素获得所有标签,括号内是标签元素,

　　　　　　　　　　　　　　　　　　   如:  var s =  document.getElementsClassName('p')    注意所得的 s 是个数组,通过索引就能取值修改

　　　　　　　　        间接查:     多用于查找标签之间的嵌套关系,这些都是属性不用加括号调用'

　　　　　　　　　　　　　　 var  s =  document.getElementById('c1') 

                                                      s.parentElement ===>  找到该标签的父标签                               s.children  ===> 找到该标签的所有子标签

　　　　　　　　　　　　　　　s.firstElementChild    ===>查找该标签下第一个子标签                s.lastElementChild     ===>找到该标签下最后一个子标签

　　　　　　　　　　　　　　　s.nextElementSibling    ===>下一个兄弟标签元素　　                 s.proviousElementSibing     ===>上一个兄弟标签元素　

 　　　　　　二,标签操作 

　　　　　　　　　　    1.创建标签     如:var a = document.createElement('div');         a .innertext = '太阳'         括号里是标签元素,  后面是为标签添加内容

　　　　　　　　　　　2,给标签添加内容    var  s =  document.getElementById('c1') 

 　　　　　　　　　　　　　　　　(1) s.innreText = '某某值'                   (2)   s.innerHTML="<a href="">a标签</a>"

　　　　　　　　　　　3,添加标签,到document中  

　　　　　　　　　　　　　　　　(1) 父标签.appendChild(新标签)                           在父标签之后添加新的标签

　　　　　　　　　　　　　　　　(2) 父标签.insertBefore(新标签,子标签)                在父标签中的指定子标签之前添加新标签

　　　　　　　　　　　4,删除标签         父标签.removerChild(要删除的子标签)   

　　　　　　　　　　　5,替换标签             父标签.replaceChild(新标签,旧标签)                 将父标签中旧标签替换成新的标签

　　　　　　　　三.标签属性操作;

　　　　　　　　　　　　var a = document.getElementById('d1')                         
　　　　　　　　　　　　a.setAttribute('age','18')               ===>设置 a 标签对象的属性

　　　　　　　　　　　　a.getAttribute('age','18')               ===>查找  a 标签对象的属性

　　　　　　　　　　　　a.removeAttribute('age')               ===> 删除a 标签对象属性

　　　　　　　　　　　　自带的属性还可以直接     .属性名       点属性名的方式来获取和设置          ====>  a.src       或者   a.src ='某某js文件'

　　　　　　　　四,样式类 的操作;                 var a = document.getElementsByClassName('.c1');        

　　　　　　　　　　　　1,操作class           1,  className           ===>获取字符串格式的样式类

　　　　　　　　　　　　　　　　　　　　2,   classlist                ===>获取数组格式的样式类

　　　　　　　　　　　　　　　　　　　　3    classlist.remove('点样式类')           ===>删除指定的样式类

　　　　　　　　　　　　　　　　　　　　4,   classlist.add('点样式类')                ===>添加指定的样式类

　　　　　　　　　　　　　　　　　　　　5,   classlist.contains('点样式类')          ===>查询是否含有该样式类,存在返回ture,不在返回false

　　　　　　　　　　　　　　　　　　　　6,   classlist.toggle('点样式类')             ===>查询存在就删除,不在就添加

　　　　　　　　　　　　2,直接操作css样式      语法 :     obi.style.属性名= '某某值'           加上等号就能修改,不加等号能获取

　　　　　　　　　　　　　　　　　　　1, 对于没有中横线的css属性一般直接使用     obi.style.属性名     的方式即可调用

　　　　　　　　　　　　　　　　　　　　　如:  obj.style.margin      obj.style.width    obj.style.left        obj.style.position

　　　　　　　　　　　　　　　　　　　2, 对含有中横线的css属性,将中横线后面的第一个字母换成大写就行

　　　　　　　　　　　　　　　　　　　　　如:   obj.style.marginTop     obj.style.borderLeftWidth     obj.style.zIndex

　　　　　　　　五,值的操作;               var a = document.getElementsByClassName('.c1'); 

                                                                注意:特定标签的使用范围;(input    select      textarea)

　　　　　　　　　　　　　　　　1.   a.value      ==>  获取 a对象 的value值       2. a.value= '要设置的值'      ==>   修改 a对象的Value值

　　　　　　　　六,事件

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

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

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

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

绑定方式一;    this是实参，表示触发事件的当前元素。    函数定义过程中的ths为形参。

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

绑定方式二;

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

联动;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</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");

  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.innerHTML = "";

    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>

select联动