JS DOM 基础

目录

• 创建
• 增
• 删
• 改
• 查
• 属性操作
• 事件操作
  • 鼠标事件

主要有创建、增、删、改、查、属性操作、事件操作

创建

1. document.write()

   页面文档流加载完毕,再调用这行会导致页面重绘(覆盖)

   document.write('< div>123< /div>')

2. innerHTML

   创建多个元素效率更高(不要拼接字符串,采取数组形式),结构稍微复杂

   Element.innerHTML = '< a herf = '#'>xiaoya< /a>'

3. createElement()

   创建多个元素效率稍低,但是结构更清晰

   Element = document.createElement('a')

增

1. appendChild

   node.appendChild(child) node 父级 child 子级 后面追加元素，类似于数组中的 push

   ul.appendChild(li)

2. insertBefore

   node.insertBefore(child,指定元素);

   ul.insertBefore(lili,ul.children[0]);

删

1. removeChild

   node.removeChild(child)

   ul.removeChild(ul.children[0])

   this.disabled = true

   表示此按钮禁用(灰色,无法点击)

改

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

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

查

主要获取 dom 的元素

1. DOM 提供的 API 方法 : getElementById, getElementByTagName

   ById : 根据 id 获取元素 var pwd = document.getElementById('pwd');

   ByTagName : 根据标签获取元素 var imgs = document.getElementsByTagName("img");

   古老方法不推荐使用

2. H5 提供的新方法 : querySelector, querySelectorAll

   Selector : 获取第一个元素 var btn = document.querySelector('button');

   SelectorAll : 获取所有匹配的元素 var items = document.querySelectorAll('.item');

3. 利用节点操作获取元素

   父(parentNode), 子(children), 兄(previousElementSibling, nextElementSibling 提倡)

   <script>
           var son = document.querySelector(".son");
           // 获取最近的父节点 找不到返回 null
           console.log(son.parentNode);
           // 获取子节点
           console.log(son.children);
           // 获取第一个子元素节点
           console.log(son.firstElementChild);
           // 获取最后一个子元素节点
           console.log(son.lastElementChild);
           // 也可以这样写 没有兼容性问题
           console.log(son.children[0]);
           console.log(son.children[son.children.length - 1]);
   
           var div = document.querySelector("div");
           // nextSibling 下一个兄弟节点包含元素节点和文本节点等
           console.log(div.nextSibling);
           // previousSibling 上一个兄弟节点
           console.log(div.previousSibling);
           // nextElementSibling 下一个兄弟节点（元素节点）
           console.log(div.nextElementSibling);
           // previousElementSibling 上一个兄弟节点（元素节点）
           console.log(div.previousElementSibling);
   </script>
   

属性操作

主要针对于自定义属性

1. createAttribute()

   var myname = document.createAttribute('myname') 创建自定义属性

2. setAttribute()

   div.setAttribute('index', '1') 设置属性值

3. getAttribute()

   div.getAttribute('index') 获取属性值

4. removeAttribute()

   div.removeAttribute('index') 移除属性

事件操作

给元素注册事件，采取 事件源.事件类型 = 事件处理程序

鼠标事件