DOM 文档对象模型

dom代表整体html文档，dom的节点皆为对象，所以若是没找到元素，则会返回null

1. document.documentElement():获取页面的根标签
2. document.body():获取body元素
3. document.title():获取标题
4. document.getElementById():得到元素id
5. document.getElementsByClassName():得到第一个元素的类，返回类数组的元素集合的结构——proporyty，找不到返回空集合；若用一条语句找两个乃至以上的类名，类名间用空格隔开
6. document.getElementsByTagName():得到元素的标签，标签名对大小写不敏感，但对id名和类名是敏感的
7. document.getElementByName():得到标签的“name”的元素
8. document.querySelector():通过css选择器得到元素，选择器的写法跟写css选择器时的一样，还有就是它不支持写伪类和伪元素

 JS对html元素节点、内容的操作

查找遍历元素节点：

以某个元素对象为基础向上、向下、同级间查找

  var ul = document.querySelector('.news .list');

1.向上遍历:找父元素

console.log(ul.parentElemnet);

2.向下遍历：找子元素

console.log(ul.children);//找到的子元素是集合

console.log(ul.childElementCount);//子元素集合的长度

console.log(ul.children.length);

找第一个子元素

console.log(ul.firstElementChild);

console.log(ul.children[0]);

找最后一个子元素

console.log(ul.lastElementChild);

console.log(ul.children[ul.childrenElementCount - 1]);

console.log(ul.children[ul.children.length - 1]);

3.同级遍历

var item3 = ul.querySelector('item3');

console.log(item3.previousElementSibling);//上一个相邻的兄弟元素

console.log(item3.nextElementSibling);//下 一个相邻的兄弟元素

 更变元素内容的操作

innerHTML:包含了文本和标签

innerText:获取文本内容，但会带上标签渲染的内容（如颜色、间距等）

innerContent：单纯的文本内容

设置标签的内容

 innerHTML能解析html内容，其余两者不能

d1.innerHTML = 'd1<br>1';

d2.innerText = 'd2<b2>2';

d3.innerContent = 'd3<br>d3';

元素节点的增删改

var ul = document.querySelector('.list');

var item2 = ul.document.querySelector('.itm2');

创建元素节点，参数是标签名（不分大小写）

var newLi = document.createElentment('li');

给创建的标签添加内容

newLi.innerHTML = ' ';

增添appendChild()，插入insertBefore()

 在ul里增加一个li标签

ul.appendChild('newLi');

将创建后的li标签插入到item2的前面

ul.insertBefore(newLi,item2);

ul.insertBefore(newLi,ul.children[0]);//放在首位

ul.insetrBefore(newLi,ul.children[1]);//放在第二位

ul.appendChild(newLi);//放在最后

ul.insetrBefore(newLi,ul.children[ul.children.length - 1]);//放在最后

ul.insetrBefore(newLi,ul.children[ul.children.length - 2]);//放在倒数第二位

如果insertBefore的第二位参数是null(不能省略)，那么就相当于appendChild()

删除 removeChild()

ul.removeChild(newLi);//删除子元素

ul.remove();删除本身

替换replaceChild(),参数1：新标签； 参数2：被替换的标签

 JS对html元素属性的操作

        1.标准属性:打点调用，适用于id、title、src、input等常见标准（不是自定义）属性

        2.万能用法：使用attribute，适用于所有的和自定义属性

        3.类名操作：className和classList

        4.CSS样式属性操作style

        5.特殊的自定义属性：data-*=""

        var di =  document.querySelector('div');

        var img = document.querySelector('img');

        var input = document.querySelector('input');

        var a = document.querySelector('a');

        一、打点调用

        div.id = 'id名';//设置id名

        img.src = '图片地址';//更改或设置图片地址

        input.value = '文本信息'//更变输入框的初始值

        a.href = '地址';

二、attribute能操作所有属性

        1.get获取属性，参数是标签的属性名

        div.getAttribute('属性名');

        2.若标签上不存在属性，就增加属性，若存在，就修改

        div.setAttribute('属性名','属性值');

        3.删除某个属性

        div.removeAttribute('属性名');

        4.判断是否有某个属性

        div.hasAttribute('属性名')

三、类名的操作

        className和classList

        直接设置类名会覆盖原有的类名，相当于直接修改，若是写多个类名，可以在多个类名间加空格

        div.className = '设置类名'

        使用字符串拼接的方式保留原有的类名

        div.className = div.className + '设置类名'

        也可以用这样的方式清空和删除类名

        div.className = div.className.replace('原类名' , ' ');

        添加类名，一次只能增加一个，不会覆盖原有的类名

        div.classList.add('类名')

        移除类名，一次只能移除一个

        div.classList.remove('类名')

        判断是否包含某个类名

        div.classList.contains('类名')

        如果本来有这个类名，就删除，若没有就增加这个类名

        div.classList.toggle('类名')

        根据索引获取类名

        div.classList.item(1)

        div.classList[1]

        四、css样式的操作

        通过JS设置style样式,它们增加到了内联样式中，优先级最大

        标签名或类名.setAttribute('style' , '属性1:值; 属性值2:值;');

        标签名或类名.style.css的属性 = '值';

        标签名或类名.style['css的属性'] = '值'

        可以通过CSSText能将样式清空,也可增加

        标签名或类名.style.cssText = ''

        标签名或类名.style.cssText =  '属性1:值; 属性值2:值;';

五、自定义属性data-*=" "

为了方便用JS向页面中传数据，使用自定义属性data-*=" " ，*可以使用一个单词，也可以使用多个单词，每个单词首字母小写，多个单词之间使用连字符链接，获取data-自定义属性的值，在JS中把data-转化为dataset，是一个对象，在对象中有后面添加的属性，如果是一个单词，直接打点调用，比如data-index,转化为dataset.index;如果是多个单词，把单词之间的连字符去掉，从第二个单词开始，首字母大写，比如data-last-inedx-number,转化为dataset。

        console.log(box.dataset.index);

        console.log(box.dataset.firstIndex);

        console.log(box.dataset.lastIndex);

        设置data-属性的值

        box.dataset.index = 6;

        获取data-属性的值也可以使用attribute，属性名写在字符串中，可以不用变换，直接使用data-index

        console.log(box.getAttribute('data-index'));

        console.log(box.getAttribute('data-first-index'));

        设置属性值

        box.setAttribute('data-index',100);

事件传递

使用addeventListener的第三个参数可指定事件是在冒泡阶段还是在捕获阶段触发：

addeventListener(type, callback, userCapture);type: 事件类型; callback: 事件监听函数。userCapture：若值为ture，事件在捕获阶段触发，若为false是在冒泡阶段触发，默认是false。

事件传播分为三个阶段：从上（window）下到目标元素的过程为捕获阶段，到达目标阶段，从目标元素上达顶部叫冒泡阶段。

阻止事件传播，一般在冒泡阶段进行阻止，也可在捕获阶段阻止

1. ev.stopPropagation();
2. ev.stopImmediateprPropagation();立即阻止事件传播
3. ev.preventDefault();阻止默认行为
4. ev.DefaultPrevented();判断默认行为是否被阻止，返回布尔值

事件

鼠标点击事件

onmousedown按下鼠标事件

onmouseup松开鼠标时触发

dblclick双击鼠标时触发

鼠标移入和移出事件

onmouseenter鼠标移入，不支持冒泡

onmouseleave鼠标移开，不支持冒泡

onmouseover鼠标移入

onmouseout鼠标移开

鼠标在标签上移动时触发

onmousemove

键盘事件

按键按下keydown、keypress；按键松开keyup

str.charCodeAt();//将字符转化成十进制的数字

console.log(String.fromCharCodePoint());//将十进制数字转化为字符

window.onkeydown = function(){

    console.log('按下键盘down');

    e.preventDefault();// 按下F5默认刷新页面，阻止按键的默认行为

    console.log(e.keyCode);//字符代表的十进制数字，如小写a代表65，大写A代表97;不区分大小写

    console.log(e.key);//获取字符的名称，如按下Ctrl得到control

    console.log(e.code);

}

动画的触发属性事件

animationstart关键帧动画开始时触发

animationend关键帧动画结束时触发

animationiteration关键帧动画多次运行时触发

transationstart过渡动画开始时触发

transationend过渡动 画结束时触发

从键盘获取按下的键，将其转为大字母显示

window.onkeydown = function(e){

       document.body.innerHTML = String.fromCharCode(e.keyCode);

       document.body.innerHTML = e.keyCode.toUpperCase();

      }

window.onkeypress = function(){

    console.log('按下键盘press');

}

window.onkeyup = function(){

    console.log('按下键盘up');

}

检测点击鼠标时alt、ctrl、shift、meta这四个键是否被按下

console.log(e.altKey);

console.log(e.ctrlKey);

console.log(e.shiftKey);

console.log(e.metaKey);

获取鼠标的相对位置

鼠标准心相对于元素的坐标；原点和元素的原点一致，都是左上角

console.log(e.offsetx,e.offsety);

鼠标相对于浏览器可视页面的坐标；原点在浏览器可视页面的左上角

console.log(e.clientx,e.clienty);

鼠标相对于整个页面的的坐标

console.log(e.pagex,e.pagey);

拖动事件

  拖动事件分两类

•  绑定在本身上：dragstart、drag、dragend
•  绑定在目标元素上

在浏览器页面内，从一个位置拖动到目标元素上，则需给被拖元素和目标元素绑定事件。

若要将电脑中的文件拖到到浏览器网页上的目标元素上时，须阻止浏览器的默认行为，需要在dragover和drop事件函数里阻止，此时没有被拖元素。

在拖动事件对象中都有一个属性dataTransfer用来做拖动事件的数据交换

在被拖动元素的事件上使用setData设置数据，在目标元素的drop事件上使用getData获取数据

其他事件

鼠标右键、滚轮事件可以使用元素绑定

document.onclickright = function(e) {

    e.preventDefault();

}

document.onwheel = function(e) {

    if(e.deltaY > 0){

        console.log('滚动条向下滚动');

    }

}

浏览器窗口对象

1、当标签和内容发生滚动时触发，可以使用某个元素对象或者window绑定scroll事件

window.onscroll = function(){

    获取页面垂直方向滚动的距离

    console.log(document.documentElement.scrollTop);

}

div.onscroll = function(){

    获取标签在垂直方向滚动的距离

    console.log(div.scrollTop);

}

2、resize

浏览器或者标签的尺寸发生变化时触发

window.onresize = function(){

    获取页面垂直方向滚动的距离

    console.log('页面发生变化时');

}

div.onresize = function(){

    获取标签在垂直方向滚动的距离

    console.log('页面发生变化时');

}

在css中resize有both、vertical、horizontal属性

资源事件