dom操作

获取页面元素节点方法

1. 根据ID获取

   doucument.getElementByld('id名')
   

2.根据标签名获取

doucument.getElementsByTagName('标签名');

3. 通过H5新增方法获取

   • document.getElementsByClassName('类名');
     document.querySelector('选择器');
     document.querySelectorAll('选择器');
     

4. 特殊的情况

   获取body元素
   document.body;
   
   
   获取html元素
   document.documentElement;
   

操作元素节点内容

1. 1. element.innerText
   2. element.innerHTML
   

操作元素节点属性

// img.属性
img.src = "xxx";

input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

操作元素节点样式属性

• 行内式的获取修改

  console.log('div.style.fontSize)
  
  div.style.fontSize='42px';
  

• 内嵌式和外链式获取

  // 高版本       
  console.log(getComputedStyle(div,null).height)
  // 低版本
  console.log(div.currentStyle.width)
  

操作属性节点

1. 获取属性值

   • 获取系统属性值(元素本身自带的属性)

     element.属性;
     element['属性']
     

   • 获取自定义的属性

     element.getAttribute('属性');
     

2. 设置属性值

   • 设置系统属性值

     element.属性 = '值';
     

   • 主要设置自定义的属性

     element.setAttribute('属性','值');
     

3. 移除属性

   element.removeAttribute('属性');
   

获取属性值的另外方法（了解）

// attributes:获取某一个元素节点的所有属性节点
console.log(div.attributes) 
// 属性节点的集合
// 类似数组：可以通过索引获取单个的属性节点
console.log(div.attributes[0])
// 类似对象：可以通过成员名获取单个的属性节点
console.log(div.attributes.id)

//H5中规定自定义属性需要以 data- 开头做属性名并且赋值

兼容性较好的获取方法
	getAttribute(‘属性’) 
    
H5新增方法（从IE11才开始支持，兼容性较差）

	element.dataset.属性;
	element.dataset[ ‘属性’ ];
dataset 可以理解成 集合 的意思，获得所有以 data-开头的 自定义属性，data-开头的自定义属性的集合

节点操作

1. 区别

   获取元素通常使用两种方式：

   1.利用DOM提供的方法获取元素	2.利用节点层级关系获取元素
   document.getElementById()	利用父子兄节点关系获取元素
   document.getElementsByTagName()	逻辑性强，但是兼容性较差
   document.querySelector 等
   逻辑性不强，繁琐

   这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

   一般的，节点至少拥有三个基本属性

节点3大基本属性

• // nodeType(节点类型)，{元素节点（1）和属性节点（2）和文本节点（3）}
  // nodeName(节点名字)，{元素节点的nodeName就是大写的标签名，属性节点的nodeName就是属性名，文本节点的nodeName就是属性名#text}
  // nodeValue(节点值){元素节点值为null,属性节点节点值为其值，文本节点值为其对应的文本内容}
  

通过节点层级获取元素

    var section = document.querySelector('section')

        // 获取父节点
        console.log(section.parentNode)/* 上一个父元素节点 */

        // 获取子节点
        console.log(section.childNodes[0])/* 所有子节点（包括文本节点）的第0个 */
        console.log(section.children[0])/* 所有子节点（不包括文本节点）的第0个 */
        console.log(section.firstChild)
        console.log(section.firstElementChild)
        console.log(section.lastChild)
        console.log(section.lastElementChild)


        // 获取兄弟节点
        console.log(section.nextSibling)
        console.log(section.nextElementSibling)
        console.log(section.previousSibling)
        console.log(section.previousElementSibling)

创建节点

document.createElement('tagName');

• document.createElement() 方法创建由 tagName 指定的HTML 元素
• 因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

添加节点

parentNode.appendChild(child)

• parentNode.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

parentNode.insertBefore(child,指定元素)

• parentNode.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

删除节点

parentNode.removeChild(child)

• parentNode.removeChild()方法从 DOM 中删除一个子节点，返回删除的节点

node.remove()

• remove()方法删除node节点自己

复制节点(克隆节点)

node.cloneNode()

• node.cloneNode()方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
• 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
• 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

修改节点

parentNode.replaceChild（新节点，旧节点）

• 节点的替换修改

dom操作核心总结

对于DOM操作，我们主要针对子元素的操作，主要有

• 创建
• 增
• 删
• 改
• 查
• 属性操作
• 时间操作

创建

1. document.write
2. innerHTML
3. createElement

增

1. appendChild
2. insertBefore

删

1. removeChild

改

• 主要修改dom的元素属性，dom元素的内容、属性、表单的值等

1. 修改元素属性：src、href、title 等
2. 修改普通元素内容：innerHTML、innerText
3. 修改表单元素：value、type、disabled
4. 修改元素样式：style、className

查

• 主要获取查询dom的元素

1. DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
2. H5提供的新方法：querySelector、querySelectorAll (提倡)
3. 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡