JavaScript之DOM

掌握常见的浏览器提供的API的调用方式

MDN-Web API

---

JavaScript分三个部分:

• ECMAScript标准：JS的基本的语法
• DOM：Document Object Model --->文档对象模型----操作页面的元素
• BOM：Browser Object Model----->浏览器对象模型---操作的是浏览器

---

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM又称为文档树模型

• 文档：一个网页可以称为文档
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• 元素：网页中的标签
• 属性：标签的属性

DOM经常进行的操作

• 获取元素
• 动态创建元素
• 对元素进行操作(设置其属性或调用其方法)
• 事件(什么时机做相应的操作)

获取元素

当我们想要对某个元素进行操作的时候，我们得获取这个元素，才能为其添加事件。

• 根据Id获取元素

var div = document.getElementById('main');

• 根据标签名获取元素

var divs = document.getElementsByTagName('div'); //得到的是一个数组

• 根据name获取元素

var inputs = document.getElementsByName('hobby');

• 根据类名获取元素

var mains = document.getElementsByClassName('main');

• 根据选择器获取元素

var text = document.querySelector('#text');

事件

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

• 事件源:触发(被)事件的元素

• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)

• 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

案例

• 点击按钮弹出提示框

<input type="button" id="bth" value="按钮" \>
<script>
  document.getElementById("bth").onclick=function (){
      alert("弹框");
  }
</script>

• 点击按钮修改元素的样式

<input type="button" id="bth" value="按钮" \>
<div id="dv" style="background-color: aqua;width: 100px;height: 100px;"></div>
<script>
  document.getElementById("bth").onclick=function (){
      document.getElementById("dv").style.backgroundColor="pink";
  }
</script>

属性操作

非表单元素的属性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

textContent和innerText

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

innerHTML和innerText

innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取---获取不到标签的,文本可以获取
innerHTML才是真正的获取标签中间的所有内容---标签可以获取，文本可以获取

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

总结:
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

 结论:
如果想要(获取)标签及内容,使用innerHTML
如果想要设置标签,使用innerHTML
想要设置文本,用innerText,或者innerHTML,或者textContent

表单元素属性

• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性

自定义属性操作

• getAttribute() 获取标签行内属性
• setAttribute() 设置标签行内属性
• removeAttribute() 移除标签行内属性

<ul id="uu">
  <li chenji="52">助教的数学成绩</li>
  <li>班主任的成绩</li>
  <li>小苏的成绩</li>
  <li>小杰老师成绩</li>
  <li>乔峰成绩</li>
</ul>
<script>
  //根据id获取ul标签,并且或者该标签中所有的li
  var list=my$("uu").getElementsByTagName("li");
  //移除属性
  list[0].removeAttribute("chenji");
  //循环遍历
  for(var i=0;i<list.length;i++){
    //先为每个li添加自定义属性
    //list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
    list[i].setAttribute("score",(i+1)*10);
    //点击每个li标签,显示对应的自定义属性值
    list[i].onclick=function(){
      alert(this.getAttribute("score"));
    };
  }
</script>

总结:

在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值，score属性是我们自定义的，只能用getAttribute（"score"） 获得。

设置自定义属性:setAttribute("属性的名字","属性的值");

获取自定义属性的值:getAttribute("属性名")

移除标签行内属性removeAttribute("属性名")

• 与 element.属性 的区别: 上述三个方法用于获取任意的行内属性。

样式操作

• 使用style方式设置的样式显示在标签行内

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

• 注意

通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
box.className = 'clearfix';

创建元素的三种方式

document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

案例：

  <style>
    div {
      width: 200px;
      height: 150px;
      border: 2px dashed pink;
    }
  </style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //第三种方式创建元素
  //创建元素
  //document.createElement("标签名字");对象
  //把元素追加到父级元素中
  //点击按钮,在div中创建一个p

  my$("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    my$("dv").appendChild(pObj);
  };
</script>

性能问题

• innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。

• 可以借助字符串或数组的方式进行替换，再设置给innerHTML

• 优化后与document.createElement性能相近

 

节点操作

前情回顾： 

文档:document
 元素:页面中所有的标签,元素---element,  标签----元素---对象
节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node。
根元素:html标签

节点的属性:

(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
 nodeType:节点的类型:1----标签,2---属性,3---文本
 nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
 nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容

这里多数用着判断是不是某个标签某个属性

//判断这个节点是不是li标签
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI"){
}

获取相关节点：

父级节点：object.parentNode

父级元素：object.parentElement

子节点：object.childrenNodes

子元素：object.firstChild

---

第一个子节点：object.firstChild（IE8中是第一个子元素）

第一个子元素：object.firstElementChild（IE8中不支持）

最后一个子节点：object.lastChild（IE8中是最后一个子元素）

最后一个子元素：object.lastElementChild（IE8中不支持）

某个元素的前一个兄弟节点：object.previousSibling（IE8中是前一个兄弟元素）

某个元素的前一个兄弟元素：object.previousElementSibling（IE8中不支持）

某个元素的后一个兄弟节点：object.nextSibling（IE8中是最后一个兄弟元素）

某个元素的后一个兄弟元素：object.nextElementSibling（IE8中不支持）

总结:

• 凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点
• 凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素
• 从子节点和兄弟节点开始。凡是获取节点的代码在IE8中得到的是元素。获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持。

节点操作，方法
    appendChild()        //追加子元素
    insertBefore()         //把新的子元素插入到第一个子元素的前面
    removeChild()        //移除子元素
    replaceChild()        //代替子元素
节点层次，属性
    parentNode
    childNodes
    children
    nextSibling/previousSibling
    firstChild/lastChild

案例:移除元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  function my$(id) {
    return document.getElementById(id);
}
  var i=0;
  my$("btn").onclick=function () {
    i++;
   var obj= document.createElement("input");
    obj.type="button";
    obj.value="按钮"+i;
    //my$("dv").appendChild(obj);//追加子元素
    //把新的子元素插入到第一个子元素的前面
    my$("dv").insertBefore(obj,my$("dv").firstElementChild);
    //my$("dv").replaceChild();---自己玩
  };

  my$("btn2").onclick=function () {
    //移除父级元素中第一个子级元素
    my$("dv").removeChild(my$("dv").firstElementChild);
  };

  my$("btn3").onclick=function () {
    //点击按钮删除div中所有的子级元素
    //判断父级元素中有没有第一个子元素
    while(my$("dv").firstElementChild){
      my$("dv").removeChild(my$("dv").firstElementChild);
    }

  };
</script>
</body>
</html>

事件详解

注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}

 

总结绑定事件的区别:
  addEventListener();
  attachEvent()
   相同点: 都可以为元素绑定事件
   不同点:

1. 方法名不一样。
2. 参数个数不一样addEventListener三个参数,attachEvent两个参数。
3. addEventListener 谷歌,火狐,IE11支持,IE8不支持； attachEvent 谷歌火狐不支持,IE11不支持,IE8支持。
4. this不同,addEventListener 中的this是当前绑定事件的对象； attachEvent中的this是window。
5. addEventListener中事件的类型(事件的名字)没有on； attachEvent中的事件的类型(事件的名字)有on。