web APIs和JS

web APIs包含 DOM 和 BOM。
DOM:文档对象模型。
DOM是一个树形结构，最上面是document，其次是根元素html,剩余子标签也陈元素或对象或node，内容陈为对象或node.
获取元素：
getElementById(id);id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
getElementsByTagName(标签名); 根据标签获取元素，返回的是伪数组（数组中的一些方法不可用）。
var a = document.getElementsByTagName(‘ul’); //输出[ul]，写父元素不会获取子元素，返回是一个数组，如果得到是父元素，再用此方法get子元素，因为返回值是个数组还要把元素取出来。
// console.log(a.shift()); //a.pop is not a function,数组的方法不可用
console.dir(a);//使用此方法打印所有得信息。
getElementsByClassName(类名);返回类名得数组。
querySelector(参数)；参数要注意：是id写成#id,类为.class,返回第一个查询到得元素对象.
querySelectorAll(arg);arg用法与上面相同，它返回得是数组。
document.body;获取body对象。
Document.documentElement;返回html对象。

时间三要素

时间三要素：事件源 事件类型 事件处理程序
事件源：谁被触发了
事件类型：触发得方式。如是鼠标点击，还是双击。。。。。
事件处理程序：通过一个方法实现

改变元素的内容：
element.innerText; 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。不能用标签改变样式。
element.innerHTML; 从起始位置到终止位置的全部内容，不去除html标签，空格和换行也不会去掉。能用标签改变样式。保留标签内容里的格式。但在表单中这个属性不能起作用，如input表单要给value赋值。

元素属性的修改：
a
b

表单属性的操作：
属性如下：type value checked selected disabled
按钮

实现密码可见于隐藏：

样式属性操作：
修改元素的颜色、大小、位置等。属性名为驼峰命名法
element.style 行内样式操作，在CSS中style权限比较高，操作的样式少，用此属性
element.className 类名样式操作，如果要修改的标签已经有类，则会被替换掉，要想保留之前的类，赋值的时候要写上。如 this.className = ‘demo coop’; demo这个类名之前已经有了，赋值时带上。class是保留的关键字，因此用的是className.

onfocus:获取焦点
onblur:失去焦点

排他算法：
btn1
btn2
btn3
btn4
btn5

获取属性值：
element.属性 获取属性值，元素内带得属性值
element.getAttribute(‘属性’)；获取自定义得属性值
自定义属性用 element.属性 将会得到undefined,要用element.getAttribute(‘属性’)
设置属性值：
element.属性 = 值，设置内置属性值
element.setAttribute(‘属性’，‘值’)；
移除属性：
removeAttribute(‘属性’)；

H5自定义属性：
H5规定自定义属性以data-开头做为属性名并且赋值。

获取元素：
element.dataset.index或者element.dataset[‘index’],ie11 才支持，一般用element.getAttribute(‘属性’)；兼容性比较好。element.dataset返回的是集合。
如果以data-index-name命名则用element.dataset[‘indexName’];驼峰命名法

节点操作：
利用节点层级关系获取元素。
节点至少拥有nodeType(节点类型)，nodeName(‘节点名称’)，nodeValue(‘节点值’)。
元素节点nodeType为1。
属性节点nodeType为2。
文本节点nodeType为3 （文本节点包含文字、空格、换行等）。
父节点：parentNode,使用该属性返回最近的父节点（就近原则),返回的是父节点的对象，如果没有返回null.
字节点：childrenNodes.该属性返回的是数组。

• 
  
• A
• 
  
• B
• 
  
• C
• 
  
• D
• 
  
• E
• 
  

兄弟节点：nextSibling.返回当前元素下一个兄弟节点，返回文本节点和元素节点。
previousSibling:上一个兄弟节点，返回文本节点和元素节点。
nextElementSibling:返回当前元素下一个兄弟节点元素对象。
previousElementSibling:返回当前元素前一个兄弟节点元素对象。这两个属性兼容性不好，IE9支持。
解决nextElementSibling属性兼容性问题：
var s = document.querySelector(‘ul’);
// console.log(s.nextSibling);//#text
function getnextElementSibling(arg) {
var d = arg;
while (d = d.nextSibling){

            if (d.nodeType === 1) {
                return d;
            }
        }
        return null;
    }
    var c = getnextElementSibling(s); //返回当前兄弟对象
    console.log(c);

创建节点：
document.createElement(‘tagName’);也称动态创建节点。
node.appendChild(child);node父级，child子级。如果已经有子节点，则在子节点后面添加。此方法也称追加方法。
node.insertBefore(child,指定元素)。
向页面新元素：1.创建元素 2.添加元素。

删除节点：
node.removeChild(child);删除该节点，并返回。
javascript:; 阻止链接跳转。
复制节点：
node.cloneNode(arg); 返回复制的节点对象。arg为空或false,只返回标签，不返回内容。arg为true返回标签和内容。

三种动态创建元素：
document.write(); 在页面解析完毕后，在执行该方法操作，会导致之前的页面重绘。
在这里插入图片描述