JavaScript 之 DOM

DOM

概念

  • DOM:Document Object Model 文档对象模型。
  • DOM作用:操作页面中的元素。
  • 顶级对象是document 就是指HTML或者XML文件。
  • HTML侧重于展示数据,XML侧重于存储数据,XHTML写的是HTML代码,遵循的是XML 的规范。
  • 每一个HTML文件都可以看成是一个文档对象,里面所有的标签的层次关系都可以看成是一个树形结构图,树状图。
  • 页面中所有的内容都是节点:标签节点,属性节点,文本节点。IE8中会忽略空白节点
  • 节点属性
    • nodeType 如果是标签,值为1;如果是属性,值为2;如果是文本,值为3
    • nodeName 如果是标签,值为大写标签名字;如果是属性,值为小写属性名字;如果是文本,值为#text
    • nodeValue 如果是标签,值为 null ;如果是属性,值为属性值;如果是文本,值为文本内容
  • 页面中的标签,标签就是元素,元素就可以看成是对象,标签也是节点。
    • 节点比元素大。
    • 根元素:页面中最外边的标签
    • 文档元素:文档中的第一个元素,HTML文档元素就是< html>

绑定和解绑

  • 第一种写法
    • 对象.on+"事件名字"=事件处理函数
    • 对象.on+"事件名字"=null
  • 第二种写法
    • 对象.addEventListener("事件名字",命名函数,false);
    • 对象.revemoEventListener("事件名字",命名函数的名字,false);

事件冒泡

  • 元素A中嵌套了另一个元素B,里面元素B和外面元素A注册了相同的事件,如果里面元素B的事件触发了,外面的元素A的该事件也会自动的触发。
  • 阻止事件冒泡的两种方法 window.event.cancelBubble=true 或者是 e.stopPropagation();

事件的三个阶段

  • 事件捕获阶段,事件目标阶段,事件冒泡阶段

  • 事件阶段有一个属性,这个属性是需要通过事件参数对象.eventPhase来获取的

  • 属性的值是:1->捕获阶段2->目标阶段3->冒泡阶段

  • e.type获取的是当前触发该事件的事件类型

    
    

    false值由内向外,一般采用false

    dv3===2===click

    dv2===3===click

    dv1===3===click

    
    

    true值由外向内

    dv1===1===click

    dv2===1===click

    dv3===2===click

DOM级别

  • DOM0 初级阶段
  • DOM1 规定了节点的类型Node,一般使用DOM1
  • DOM2 新增了一些方法,但是很多浏览器并不支持
  • DOM3 大多数浏览器都没有支持

全局变量和隐式全局变量

  • 全局变量不会被删除,隐式全局变量会被删除

innerText和innerHTML

  • 设置文本内容的时候,用两个都一样
  • 设置标签内容的时候
    • innerText设置标签内容,显示的是标签+文本,标签实际上是转义出来了
    • innerHTML设置标签内容,显示的是效果
  • 如果想要设置文本,用谁都可以,如果想要有标签效果,用innerHTML
  • 获取标签中的文本内容,使用innerText和innerHTML都可以,如果获取的是元素中的标签和文本内容,应该使用innerHTML

innerText和textContent

  • innerText:谷歌支持,低版本火狐不支持,高版本火狐支持,IE8支持
  • textContent:谷歌支持,火狐支持,IE8不支持
  • 浏览器不支持某属性时,该属性的类型是undefined

className

  • html标签中的class属性,在js 中是关键字,不能直接使用。所以, 对象.class="值"; 这种写法是错误的。应该这么写:对象.className="值";
  • 对象.style.属性名="值"; div.style.backgroundColor="red";
  • 对象.className="值"; div.className="cls";

自定义属性

  • 获取自定义属性的值 对象.getAttribute(“属性的名字”); 返回值是该属性的值
  • 设置自定义属性的值 对象.setAttribute(“属性的名字”,”值”);
  • removeAttribute,getAttribute,setAttribute三个方法不仅可以操作元素的自定义属性及值,还可以操作元素的自带属性

隐藏方式


设置样式

  • 如果样式的属性是在style属性中设置的,是可以直接获取的
  • 如果样式的属性是在style标签中设置的,不能直接获取

获取节点元素12个


创建元素的两种方式

  • 第一种 对象.innerHTML=”标签代码及内容”
  • 第二种 document.creatElement

三大系列

offset系列

  • offsetLeft:元素相对左边的横坐标
  • offsetTop:元素相对上面的纵坐标
  • offsetWidth:元素的宽度,有边框
  • offsetHeight:元素的高度,有边框
  • offset系列获取的值都是数字类型
  • offsetWidth(offsetHeight)获取的元素本身的宽(高)+元素边框的宽(高)
  • 如果父级元素脱离文档流,子级元素此时的offsetLeft获取的是相对父级元素的pading+自己的margin
  • 如果元素自己脱离文档流,此时的offsetLeft获取的事自己的left+自己的margin

scroll系列

  • scrollLeft:向左卷曲出去的横坐标
  • scrollTop:向上卷曲出去的纵坐标
  • scrollWidth:内容实际的宽度,没有内容就是元素的宽度,没有边框
  • scrollHeight:内容实际的高度,没有内容就是元素的高度,没有边框

client系列

  • clientX:可视区域的横坐标
  • clientY:可视区域的纵坐标
  • clientWidth:可视区域的宽
  • clientHeight:可视区域的高

你可能感兴趣的:(JavaScript 之 DOM)