Js基础语法---DOM操作

一、使用DOM:

DOM（Document Object Model)文档对象模型是HTML和XML的应用程序接口（API）。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

1. document对象

   在浏览器引擎中，与用户进行数据交换都是通过客户端的JavaScript代码来实现的，而完成这些交互工作大多数是document对象及其部件进行的，因此document对象是一个比较重要的对象。document对象是文档的根节点。   
 window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在了，就可以直接调用了。

2.查找节点

•getElementsByTagName方法：返回一个页面上所有包含tagName（标 签名）等于某个指定值的元素节点对象集合
•getElementById方法：根据元素的id属性查找某个元素节点对象。
•getElementsByClassName方法：查找所有class属性为指定值的节点对象集合。
•querySelectorAll方法：所有匹配CSS选择器的元素节点对象集合。
•querySelector方法：所有匹配CSS选择器的元素节点的第一个对象。

3. 处理属性

•getAttribute(name)：获取某个属性的值
•setAttribute(name,newvalue)：设置某个属性的值
•reomveAttribute(name)：移除某个属性

4. 读取和设置内容

•innerText属性：用来设置或获取节点的文字内容。操作元素中包含的所有文本内容，无论文本位于子文档树中的什么位置。在通过innerText读取值是，它会按照由浅入深的顺序，将子文档树中所有文本拼接起来
•innerHTML属性：用来设置或获取位于HTML标签对象起始和结束标签内的HTML代码

5.创建和操作节点

（1）创建新节点

•createTextNode(text)：创建包含文本text的文本节点
•createElement(tagName)：创建标签为tagName的HTML元素节点
•appendChild(obj):附加子标签元素对象节点

（2）删除结点

•removeChild(elem)：删除节点

（3）替换节点

•replaceChild(newElem,oldElem)：replaceChild方法有两个参数，被添加的节点对象和被替换的节点对象

（4）插入节点

•insertBefore(newElem,objElem)：两个参数（即要添加的节点对象和目标节点对象）

（5）createDocumentFragment

 使用createElement循环生成对应的节点对象后，附加到相应的父节点，DOM修改会导致页面重绘、重新排版。
 重新排版会阻塞用户的操作，同时，如果频繁重排，CPU使用率也会猛涨，App的性能会受到严重影响。
 所以，为了得到更高的性能，一般使用createDocumentFragment创建文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到指定的节点上

（6）复制节点

  使用cloneNode实现对节点对象的复制，并返回复制的节点对象。
  输入参数为true实现深复制，复制当前节点对象和它下面的所有子节点对象，
  输入参数为false,实现浅拷贝，仅复制当前节点对象。

二、DOM的样式编程

对象样式编程就是通过JS操作页面HTML元素的样式，实现一些特殊的显示效果，如旋转等

1. className属性

className属性可以用来读取或设置HTML元素对象的class属性。
当将className属性设置为空字符串时，代表移除所有的样式。

2. classList对象

每个节点上都有一个classList对象，提供了方法新增、删除、修改节点上的样式类

3. style对象

style对象包含了与每个CSS样式对应的属性，只是格式略有不同：
对于单个单词的CSS样式，以相同的名字属性来表示（例如，color样式通过style.color表示），
对于两个单词的CSS样式，则是通过去除横杠，将第一个单词加上首字母大写的第二个单词（例如：background-color样式对应style.backgroundColor）
可以方便获取HTML元素对象的style属性所定义的CSS样式值，但它无法获取在外部定义的CSS样式。

三、事件

JavaScript是基于对象(object-based）的语言，基于对象的基本特征，就是采用事件驱动（event drive)。事件是在浏览器中可以被 JavaScript 侦测到的行为，例如用户点击了按钮，移动了手指，都会触发相应的事件

1.常用事件

包括鼠标、键盘、触摸和其他一些事件
鼠标事件：onmousedown、onmousemove、onmouseup、onclick、ondbclick
键盘事件：onkeydown、onkeyup、onkeypress等
触摸事件：ontouchmove、ontouchend、ontouchstart、ontouchend等
其他一些事件：onfocus、onblur、onresize、onload、onunload等

2.js事件侦听的实现方式

①.内联属性监听事件

    <input type="button" value="运行JS函数"
 onclick="eventTest();"/></input>

再定义函数evenTest()的功能

也可以直接onclick="alert('hello');"

②.DOM属性监听事件

  var  oInput1=document.getElementById("mybutton1");
  oInput1.onclick=function(){
  nnalert("hello world");
  }

③.标准的事件监听函数

  oInput.addEventListener("click",function(){
             …… 
   },false);

若为true表示事件监听是在“捕获”阶段中监听，false表示在“冒泡”阶段中监听

3. 事件触发过程

4.事件的Event对象

当一个事件被触发的时候，会创建一个事件对象（Event Object），这个对象里面包含了一些有用的属性或者方法。事件对象会作为第一个参数，传递给我们的回调函数。事件对象包含了很多有用的信息，比如事件触发时，鼠标在屏幕上的坐标、被触发的 DOM 详细信息等