JS之DOM基础

JavaScript分三个部分：

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

---

DOM

• 文档对象模型(Document Object Model) 简称DOM ： 定义了访问和操做 HTML 文档的标准。

• 页面就是文档--document,文档中有根元素:html(可把一个html文件当作是一个文档，因为万物皆对象，因此把文档也看作对象)
• XML文件也能够当作是一个文档
• HTML：展现信息，展现数据的
  XML：侧重于存储数据

  <?xml verson="1.0" encoding="UTF-8" ?> 
  复制代码

• 标签能够嵌套，标签中有标签，元素中有元素
  html页面中都有一个根标签--html--也叫根元素
  页面中有一个根元素（标签--html）, 里面有不少元素（有不少的标签，有不少的对象）

• 元素(element)：页面中的因此的标签都是元素，元素能够当作是对象
• 节点(node)：页面中因此的内容都是节点：标签，属性，文本
  root:根

• html-->head
  ------->body--->其余的标签
  由文档及文档中的全部的元素(标签)组成的一个树形结构的图,叫树状图(DOM树)

---

DOM选择器

• id: document.getElementById("id属性的值");====>返回的是一个元素
• 标签: document.getElementsByTagName("标签的名字"); 不管获取的是一个标签，仍是多个标签，最终都是在数组中存储的，这行代码的返回值就是一个伪数组(包含多个元素对象)
• name: document.getElementsByName("name属性的值"); ====>返回一个伪数组

----如下获取元素的操做，有些浏览器不支持

• class : document.getElementsClassName("类样式的名字");====>返回一个伪数组(H5中的)
• 选择器：
  • document.querySelector("选择器的名称"); 根据选择器的方式获取元素====>返回一个元素
  • document.querySelectorAll("选择器的名称"); 根据选择器的方式获取元素====>返回一个伪数组

---

节点: Node,页面中的全部内容(标签,属性,文本)

• 元素
• 节点的属性: 能够用标签(元素)/属性节点/文本节点 . 出来 (node.XXX)
  • nodeType : 值表明的含义1--标签, 2--属性, 3--文本
  • nodeName: 节点的名称
    • 1.标签节点---大写的标签名称
    • 2.属性节点---小写的属性名称
    • 3.文本节点---#text
  • nodeValue: 节点的值
    • 标签节点---null
    • 属性节点---属性值
    • 文本节点---文本内容
• 获取节点及元素

  名称	节点	元素
  父级	parentNode	parentElement
  子级	childNodes	children
  第一个子级	firstChild	firstElementChild
  最后一个子级	lastChild	lastElementChild
  前一个兄弟节点	previousSibing	previousElement
  后一个兄弟节点	nextSibing	nextElementSibing

  获取的属性的节点 object.getAttributeNode("属性的名称")
• 总结 :
  • 凡是获取节点的代码中谷歌火狐获得都是相关的节点,凡是获取元素的代码中谷歌火狐获得的都是相关的元素
  • 从子节点和兄弟节点开始,获取节点的代码中IE8中获得是元素,获取元素的代码在IE8里面获得的是undefined

封装获取节点兼容代码

列举一个 其余同理

• element.firstChild-->谷歌火狐获取的是第一个子节点
• element.firstChild-->IE8获取的是第一个子元素
• element.firstElementChild--->谷歌火狐获取的是第一个子元素,IE8不支持

/**
*获取父级元素中第一个子元素
*@param element 父级元素
*@returns {*} 父级元素中的子级元素
*/
function getFirstElement (element){
    if(element.firstElementChild){//谷歌火狐支持
        return element.firstElementChild;
    }else{
        var node = element.firstChild;
        while(node && node.nodeType != 1){//若是获取的第一个节点不是标签的时候
            node = node.nextSibling;
        }
        return node;
    }
}
复制代码

• 获取某个元素的全部兄弟元素

/**
 * 获取某个元素的全部兄弟元素
 * @param element 某个元素
 * @returns {Array} 兄弟元素
 */
function getSiblings(element) {
    if (!element)return;
    var elements = [];
    var ele = element.previousSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);
        }
        ele = ele.previousSibling;
    }
    ele = element.nextSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);

        }
        ele = ele.nextSibling;
    }
    return elements;
}
复制代码

---

元素的建立

• 元素建立的三种方式
  • document.write("标签代码及内容"); 缺陷: 若是是中页面加载完毕后,此时经过这种方式建立元素,那么页面上存在的全部内容所有被干掉.
  • element.innerHTML = "标签及代码";
  • document.creatElement("标签名称");
    • 建立后要把元素追加到父级元素中(appendChild(对象))
    • 把新的元素插入到后者前面: element.insertBefore(newnode,existingnode)
      • 参数：newnode(必需,须要插入的节点对象)--existingnode(可选,在其前插入新节点的子节点,若无则插入到结尾)
    • 替换元素: element.replaceChild(newnode,oldnode)
    • 移除元素: element.removeChild(node)

---

设置文本内容

• 设置文本内容的几个属性

  • innerText : 表示节点及其后代的"呈现"(没隐藏)文本内容
  • textContent : 表示节点及其后代的文本内容
  • innerHtml : 获取或设置元素中包含的HTML或XML标记(就是说获取包括标签以及文本的内容)

• textContent与innerText的区别

• textCont获得全部元素,包括的内容<script>和<style>元素,相比之下innerText只显示"人类可读"的元素(无隐藏).

  • textContent返回节点中的每一个元素。相反，innerText意识到样式而且不会返回“隐藏”元素的文本。

• textContent和innerHTML的差别

  • innerHTML返回HTML.有时会使用innerHTML中元素中检索或写入文本,但textContent性能更好,由于它的值不会被解析为HTML.

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

  • 凡是成对的标签，中间的文本内容，设置的时候都使用innerText这个属性的方式

  <p id="p1">我是一个P标签</p>
  document.getElementById('p1').ineerText="这是一个P";
  复制代码

  (若是这个属性在浏览器中不支持，那么这个属性的类型是undefined。)

• 获取的时候：

  • innerText能够获取标签中间的文本内容，但标签中若是还有标签，那么最里面的标签的文本内容也能获取。----获取不到标签的，文本能够获取
  • innerHTML才是真正的获取标签中间的全部内容

• 结论：若是想要(获取)标签及内容用innerHTML，若是想要设置标签使用innerHTML，想要设置文本，用innerText、innerHTML、textContent

• 获取及设置元素的文本内容的兼容代码

  /**
   *设置元素的文本内容
   *@param(参数) element 任意元素
   *@param text 任意文本内容
   */
   function setInnerText(element,text){
       if(typeof(element.textContent) == "undefind")){
           element.innerText = text;
       }else{
           element.textContent = text;
       }
   }
   
   /**
   *获取元素的文本内容
   *@param element 任意元素
   *@returns {*} 任意元素中的文本内容
   */
   function getInnerText(element){
       if(typeof(element.textContent)){
           return element.innerText;
       }else{
           return element.textContent;
       }
   }
  复制代码

---

补充零碎点

• 规律：
  • 在表单标签中,若是属性和值只有一个, 而且值是这个属性自己,那么在写js代码dom操做的时候,这个属性值可用布尔类型
  • html中属性和值是本身的,而且只有一个.能够只写这个属性不赋值(disabled-->禁用属性)

  //name属性用来设置分组
    <input type="button" value="修改性别" id="btn1"/>
    <input type="radio" value="1" name="sex"/>男
    <input type="radio" value="2" name="sex"/ id="rad1">女
    //封装获取ID函数
    function my$(id){
        return document.getElementById(id);
    }
    my$("btn").onclick = function(){
        my$("rad1").checked = true;
    };
  复制代码

• 凡是css中这个属性是多个单词的写法在js代码中dom操做的时候,把-去掉,后面的单词首字母大写便可(例如:CSS中的background-color ---> backgroundColor)
• 在js代码中dom操做是,设置元素的类样式,不用class关键字,应使用className

a标签

• 阻止超连接的默认的跳转: return false;
• 获取内层的a标签最好不要直接加id,先获取最外面的div,再用getElementsByTagName("a")[i];获取

自定义属性

• 语法:
  • 设置自定义属性 : setAttribute("属性的名字",属性的值);
  • 获取自定义属性的值 : getAttribute("属性的名字");
  • 移除自定义属性 : removeAttribute("属性的名字");(或者能够直接设置属性的值为空)
• 在html标签中添加的自定义属性,若是想要获取这个属性的值,须要用getAttribute("自定义属性的名字");才能得到这个属性的值(不能直接经过DOM对象的方式来直接获取该属性的值)

for循环中的事件

• for循环是在页面加载的时候,执行完毕了

  for(var k=0;k<5;k++){};console.log(k);//k=5

  事件是在触发的时候,执行的

  例:

  <input type="button" value="1"/>
  <input type="button" value="1"/>
  <input type="button" value="1"/>
  //获取全部的按钮,分别注册点击事件
  var btnObjs = document.getElementsByTagName("input");
  //循环遍历全部的按钮
  for (var i = 0; i < btnObjs.length; i++) {
    //为每一个按钮都要注册点击事件
    btnObjs[i].onclick = function () {
      //把全部的按钮的value值设置为默认的值:1
      for (var j = 0; j < btnObjs.length; j++) {
        btnObjs[j].value = "1";
      }
      //当前被点击的按钮设置为:2
      this.value = "2";
    };
  
  }
  //console.log(i);//3
  复制代码

------------------------------------------------------记录于 2019.4.16 JavaScript之DOM基础