DOM操作精要-优快云博客

JavaScript分三个部分：

ECMAScript标准：JS 的基本语法
DOM：Document Object Model --->文档对象模型 ---操作页面的元素
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
复制代码