12-JavaScript-DOM开篇

• 什么是DOM?
  1. 文档对象模型
  2. DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准
• 什么是document文档对象?
  是系统提供的一个对象, 这个对象就是DOM对象, 这个对象以树的形式保存了界面上所有的内容

---

界面元素获取

• JavaScript三种对象
  • 自定义对象

  function Person(){}
  var p = new Person();
  

  • 内置对象

  Array/String/Boolean/Number/....
  

  • 宿主对象

  简单的可以理解为浏览器提供的对象
  DOM和BOM中的对象都是宿主对象
  

• 通过ID获取界面上的元素
  会将id名称为指定名称的的元素返回给我们

    var oDiv = document.getElementById("box");
    console.log(oDiv);
    console.dir(oDiv);

• 通过类名获取界面上的元素
  找到所有类名为指定名称的元素, 放到一个集合对象中返回给我们,这个集合对象是一个伪数组(对象)

注意点:
有兼容性问题 IE9才支持
通过指定索引来确定查找哪一个元素

    var oDiv = document.getElementsByClassName("father")[1];
    console.log(oDiv);
    console.log(oDiv instanceof Array);

• 通过标签名称获取界面上的元素
  找到所有标签名称为指定名称的元素, 放到一个集合对象中返回给我们
  这个集合对象是一个伪数组(对象)

    var oDiv = document.getElementsByTagName("div");
    console.log(oDiv);

• 通过选择器来获取界面上的元素
• querySelector()只会返回找到的第一个元素,后面的元素不会返回
• querySelectorAll()会找到所有指定的元素,返回一个伪数组

    var oDiv = document.querySelector("div");
    var oDivs = document.querySelectorAll("div");
    console.log(oDiv);
    console.log(oDiv instanceof Array);

注意点:
querySelector("div")和querySelectorAll("div")可以传入任何选择器

---

文档加载顺序

• 1.浏览器在加载一个界面的时候, 是按照从上至下的顺序加载的
• 2.如果将script标签写在head标签中, 那么执行js代码的时候, 网页还没有加载完毕
  DOM对象也还没有准备完毕, 所以可能获取不到我们需要的元素
• 3.如果将script标签写在body标签的最末尾, DOM对象已经准备完毕了, 所以我们可以获取到我们需要的元素
• 4.如果非要把script标签写在head标签中, 那么需要执行的代码最好写好onload方法中,onload方法的作用是等待网页上所有的资源加载完毕之后才会执行网页上所有的资源包含所有的标签/图片/CSS文件/JS文件等
• 5.window.onload和将script标签写在body最后的区别:
  • window.onload执行时, 不仅DOM对象准备好了, 网页上所有资源也都准备好了
  • body后的script标签执行时, 仅仅代表DOM对象准备好了, 而网页上的其它资源不一定准备好了
  • 综上所述: body后的script标签的效率高于window.onload

---

节点之间的关系

• 通过子元素获取父元素

    // 一般情况下在JS中带Element单词的属性或者方法都有兼容性问题
    // parentElement: 获取父元素
    // parentNode: 获取父节点, 拿到的不一定是一个元素
    // 因为在DOM有节点有(标签节点/属性节点/文本节点)
    var oFDiv = oDiv.parentElement || oDiv.parentNode;
    console.log(oFDiv);

• 通过指定元素找到上一个元素(兄弟级别)

    var oLi = document.querySelector(".box");
    //兼容性写法
    var pre = oLi.previousElementSibling || oLi.previousSibling;
    console.log(pre);

• 通过指定元素找到下一个元素

    var oLi = document.querySelector(".box");
    var next = oLi.nextElementSibling || oLi.nextSibling;
    console.log(next);

• 通过指定元素找到所有的子节点/子元素

    var oUl = document.querySelector("ul");
    // 4.1childNodes获取当前元素所有的子节点(标签节点/属性节点/文本节点)
    var oLis1 = oUl.childNodes;
    console.log(oLis1);
    // 4.2children获取当前元素所有的子元素
    var oLis2 = oUl.children;
    console.log(oLis2);

注意点: HTML没有父元素,但是有父节点,父节点是DOM对象

    var oDiv = document.querySelector("html");
    // Element是在Dom树中查找父元素, HTML没有父元素
    console.log(oDiv.parentElement);
    // Node是在Dom树中查找父节点, HTML的父节点就是DOM对象
    console.log(oDiv.parentNode);
    console.log(document);

节点的增删改查

    //获取元素
    var oDiv = document.querySelector(".box");
    // 2.如何创建一个元素
    // 根据指定的标签名称创建一个标签(元素)
    var oA = document.createElement("a");
    // console.log(oA);

    // 3.添加元素到界面上
    // 将传入的元素添加到调用的元素中
    // 注意点: 会添加到指定元素中的末尾
    oDiv.appendChild(oA);
    
    var oP = document.querySelector(".p2");
    var op1 = oP.previousElementSibling || oP.previousSibling;

    // insertBefore 将第一个参数的元素插入到第二个参数元素的前面作为父元素的子节点
    // oDiv.insertBefore(oA,oP);
    oDiv.insertBefore(oA,op1);

    // 4.删除指定的元素
    // 删除调用者当中的指定元素
    // 注意点: 只能通过父节点调用removeChild删除子节点
    //         不能自己删除自己
    oDiv.parentNode.removeChild(oDiv);

---

节点属性操作

获取属性

• 通过DOM查询到对应的元素之后, 返回给我们的是一个对象,DOM就已经将这个元素所有的自带的属性都已经封装到这个对象中了, 所以可以直接通过对象操作属性的方式来操作

 var oImg = document.querySelector("img");
 // console.dir(oImg);
 console.log(oImg.src);
 console.log(oImg.alt);
 console.log(oImg.wjh);//自定义属性不能直接获取

注意点:
这种方式只能获取元素自带的属性,自定义的属性不能获取

• 第二种方式
  • getAttribute方法获取

   console.log(oImg.getAttribute("src"));
   console.log(oImg.getAttribute("alt"));
   console.log(oImg.getAttribute("wjh"));
  

注意点:
使用 getAttribute方法方法可以获取自定义的属性

删除属性

• 将属性对应的值直接赋值为空字符串

oImg.src = "";
oImg.alt = "";

• 通过removeAttribute方法来删除

oImg.removeAttribute("src");
oImg.removeAttribute("alt");
oImg.removeAttribute("wjh");//可以对自定义属性操作

设置属性值

• 通过setAttribute("属性的key","属性的对应值")来设置

oImg.setAttribute("alt", "我是心智");
oImg.setAttribute("lnj", "我是心智");

---

元素文本操作

• innerHTML属性
  • 作用:获取或者设置调用者中的内容

注意点:
如果是获取, 会原封不动的将调用者中的内容返回给我们(包含标签)
如果是设置, 会利用设置的值覆盖调用者中所有的内容并且如果设置的值中包含了HTML标签, 也会解析创建之后再添加

    var oDiv = document.querySelector("div");
    console.log(oDiv.innerHTML);
    oDiv.innerHTML = "<a>我是a标签</a>";

• innerText属性
  获取或者设置调用者中的内容

注意点:
如果是获取, 会去掉调用者中的标签, 将其它的内容返回给我们, 并且会去除两端的空格
如果是设置, 会利用设置的值覆盖调用调用者中所有的内容并且如果设置的值中包含了HTML标签, 不会解析和创建, 会原样添加有兼容性的问题, 不能很好的支持所有的浏览器

var oDiv = document.querySelector("div");
console.log(oDiv.innerText);

• textContent属性
  获取或者设置调用者中的内容

注意点:
如果是获取, 会去掉调用者中的标签, 将其它的内容返回给我们, 但是不会去除两端的空格
如果是设置, 会利用设置的值覆盖调用调用者中所有的内容并且如果设置的值中包含了HTML标签, 不会解析和创建, 会原样添加有兼容性的问题, 不能很好的支持所有的浏览器

    var oDiv = document.querySelector("div");
    // console.log(oDiv.textContent);
    oDiv.textContent = "<a>我是a标签</a>";

注意点:
前面的三个属性用于获取或者设置双标签中的内容
如果想获取或者设置input中的内容, 需要使用value属性

    var oInput = document.getElementsByTagName("input")[0];
    console.log(oInput);
    console.log(oInput.value);

---

设置元素CSS样式

• 通过style属性来设置

    oDiv.style.width = "100px";
    oDiv.style.height = "100px";
    //CSS中用-连接的属性名称, 都会去掉-, 将后面一个单词的首字母大写
    oDiv.style.backgroundColor = "#ccc";

注意点:
如果是设置宽度和高度, 需要添加单位, 否则会报错

通过style属性设置的样式都是行内样式, 所以会覆盖掉CSS代码设置的样式

• 通过className属性来设置

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #000;
        }
</style>
oDiv.className = "box";

知识要点:
如果是操作个别的样式, 那么推荐使用style属性
如果是操作多个的样式, 那么推荐使用className属性

---