Dom

Dom->document Object Modal 文档对象模型
js中有三种对象
1、本地对象：native Object

  1. Object Function Array String Number Boolean Error EvalError SyntaxError 
  2. RangeError ReferenceError TypeError URIError Date RegExp

2、内置对象 Built-in object

  1. Global Math  
  2. isNaN() parseInt() Number decodeURI encodeURI Infinity NaN undefined
  3. 本地对象和内置对象都是ES的内部对象

3、宿主对象 Host object

  1. 执行js脚本的环境提供的对象，浏览器对象；兼容性问题
  3. 浏览器对象window（BOM）和document(DOM)->w3c
  4. DOM:通过浏览器提供的这一套方法表示或者操作HTML和XML
  5. XML 可以自定义标签
  6. <person>
  7.   <name></name>
  8.      <sex></sex>
  9.  </person>
  11. XMl->XHTML->HTML
  12. Dom不能直接操作css只能操作xml，html 
  14. <div class='bibi'></div>
  15. var bibi=document.getElementsByClassName('bibi')[0];
  16. bibi.style.backgroundColor='pink';
  17. 这里只是操作div的style属性添加的css样式，所以并没有直接操作css

image.png

点击事件

  1. var box=document.getElementsById('box');
  2. box.onclick=function(){
  3.   console.log('11');
  4. }
  6. var boxs=document.getElementsByTagName('div');
  7. for(var i=0;i<boxes.length;i++){
  8.   boxes[i].onclick=function(){
  9.     console.log(this.innerText);//此处的this就是表示点击的谁
  10.   }
  11. }