js的DOM

DOM

document object model 简称文档对象模型，主要是操作html元素

获取元素节点的方式

通过选择器获取

document.getElementById()  // id选择器，通过id属性来获取元素，参数为string类型的id,返回值是htmlElement
​
document.getElementsByClassName()  // class选择器，通过class属性名获取对应元素，参数为string类型的class名字，返回值是htmlCollectoinof<Element> ，类似一个集合，里面存储了Element，通过下标获取里面对应的元素
//htmlCollection是类似数组的一种结构 具备下标同时具备length属性 可能会有多个数据，但是htmlCollection并不是一个数组 他不具备数组的方法 只是存在对应的下标和length属性
​
document.getElementsByTagName()  // 标签选择器，参数为string类型的标签名，返回值为htmlCollection,通过下标获取里面的元素
 // 通过name值来获取 返回的类型是一个nodeList nodeList不是htmlCollection
 //但是他同样具备对应的下标和length属性 他的方法比htmlCollection要多
 
 document.querySelector()  // 复合选择器，参数为string类型的选择器，返回第一个匹配选择器的元素
 
 document.querySelectorAll()  // 返回所有匹配选择器的元素，接收的是一个nodeList容器，通过下标获取里面的元素
 
 document.getElementByName()  //通过name属性获取 返回的是NodeList

html属性操作

element.attribute  // 获取所有属性，返回一个nameNodeMap，里面包含多个数据，一：可以通过下标访问里面的属性，二：还可以通过键（属性名），三：通过item方法获取是getNameItem方法，有length属性，访问属性的个数，还存在增改set删remove查get的方法。
​
element.Attr  // 属性节点对象
​
例子：
 <div opo = 'a' id="name" title="你好"></div>
    <script>
        var box = document.getElementsByTagName('div')[0];
        var attrs = box.attributes;  // attributes 获取元素所有属性
        console.log(attrs);  //NamedNodeMap {0: opo, 1: id, 2: title, opo: opo, id: id,         title: title, length: 3}
        // 访问元素属性opo
       // 第一种 下标
        console.log(attrs[0]);  // opo='a'
        // 第二种 键
        console.log(attrs['opo']); //opo='a'
        // 第三种 item
        console.log(attrs.item(0));  //opo='a'
        console.log(attrs.getNamedItem('opo'));  //opo='a'
        // 第四种 .属性名
        console.log(attrs.opo);  //opo='a' 获取方式与第二种一致
        // 访问里面属性的个数
        console.log(attrs.length);  //1
        //删除opo这个属性名对应的属性节点
        attrs.removeNamedItem('opo')
        // 创建一个属性节点，参数名为属性值，仅能创建
        var opo = document.createAttribute('opo');
        // 给属性节点属性，还要另外给属性赋值
        opo.value = 'hello';
        // 属性节点不能直接赋值，需要修改可以调用setNameItem里面需要传入一个新的属性节点，最后通过设置        //才能算opo添加到NamedNodeMap内
        attrs.setNamedItem(opo);
        console.log(attrs);  //NamedNodeMap {0: id, 1: title, 2: opo, id: id, title:            title, opo: opo, length: 3}
        console.log(attrs.opo);  // opo = 'hello'
        //对于本身天生就有的属性，直接通过元素.属性名，来获取
        // 以上都是属于NamedNodeMap对象的节点操作，除了document.createAttribute()不是， 统一获            取，使用attributes返回的是一个属性节点集合
         // 属性节点操作操作
        box.setAttribute('opo', '123');   //参数一位属性名，参数二为属性值，都是string类型，如果       属性已经存在则会覆盖原来的属性值
        getAttribute()  //  通过属性名获取对应的属性值，参数为属性名
        removeAttribute()  // 移除指定的属性，参数为要移除的属性名
  </script>

element.属性名  // 对于element内置的属性，可以这样设置
​
element.className  // 返回class的名字，可以进行获取操作也可以进行赋值操作
​
element.id  // id
​
element.title  // title名字，没有为空
​
​

style样式操作

element.style.样式名  //样式名如果是组合名遵循驼峰命名法
​
element.style.backgroundColor  // 可以获取也可以赋值设置
​
className  // 类名，需要特别注意

文本

innerText  // 获取显示的文本，赋值就是设置对应的文本，忽略标签
​
innerHTML  // 获取显示的html内容，赋值就是设置对应的html内容，会解析html标签
​
value  // 获取文本框的内容

节点

元素节点，属性节点，文本节点

nodeName  // 节点名称
​
nodeType  // 节点类型  1 == 元素节点  2 == 属性节点 3 == 文本节点
​
nodeValue   // 节点值  元素节点为null,属性节点是属性值，文本节点是文本值

子节点

element.childElementCount  // 返回节点的元素个数
​
element.childNode  // 返回所有的节点集合，返回类型是一个nodelist,包含所有的子节点
​
element.children  // 返回子元素，返回的是一个htmlCollection,只包含元素节点

  //tagName 获取标签名 document表示整个文档
​
  var content = document.getElementById('content')
​
 console.log(content.tagName); //tagName是一个只读属性 不能进行设置
 
 //document表示整个文档 使用document.获取方法 是在全文中进行获取

父元素，子元素，兄弟元素

parentNode  // 获取父节点，返回Node
​
parentElement  // 获取父元素，返回element
​
children  // 获取所有的元素子节点，返回的是一个htmlCollection
​
children[0]  // 获取第一个子元素（最常用）
​
firstChild  // 获取第一个子节点（包含所有节点）
​
lastChild  // 获取最后一个子节点（包含所有节点）
​
nextSibling  // 下一个兄弟节点
​
previousSibling  // 上一个兄弟节点
​
nextElementSibling  // 
​
previousElementSibling  //

元素节点操作方法

createAttribute('属性名')  // 创建属性节点，必须赋值
​
createElement()  // 创建一个元素，返回的类型是element
​
appendChild()  // 在父元素后添加一个子节点
​
insertBefore()  // 添加到前面，参数一位需要添加的节点，参数二为添加到前面的哪个子节点
​
removeChild()  // 删除子节点
​
createTextNode()  // 创建文本节点
​
cloneNode()  // 克隆一个新的节点
​
setAttributeNode()  // 设置属性节点  建议使用setAttribute()
​
replaceChild()  //  替换子节点,参数一要替换的，参数二被替换的

事件