DOM

2017-07-26 本文已影响0人 flyingtoparis

节点层次

节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标志，每个节点拥有各自的特点，数据和方法，节点与其他节点之间存在某种关系。节点之间构成了层次。

Node类型

js中所有的节点类型都继承自Node类型，因此所有的节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表示节点的类型
nodeType属性，用于表明节点的类型

if (some.nodeType == Node.ElEMENT_NODE){    // 节点类型p248   该方法在IE中无效
    console.log('node is an element')    
}

if(some.nodeType == 1){
    console.log('node is an element')       // 适用于所有的浏览器中
}

nodeName和nodeValue 属性

<body>
<div id="box"></div>
<script>
    var oBox = document.getElementById('box');
    console.log(box.nodeName);   // DIV  保存的始终是元素的标签名
    console.log(box.nodeType);   // 1    识别到元素的类型
    console.log(box.nodeValue);  // null 始终为null
</script>
</body>

节点关系

每个节点包含childNodes属性，用于保存一组有序的节点，可以通过位置访问，有length属性，但是并不是Array实例
NodeList对象可以自动反映DOM的节点变化，并不是瞬间固定的

<body>
<div id="box">
    <a>1111111</a>
    <a>222222222</a>
    <a>3333333333</a>
    <a>44444444444</a>
</div>
<script>
    var oBox = document.getElementById('box');
    for ( var  i = 0; i < oBox.childNodes.length ; i ++){
        console.log(oBox.childNodes[i].nodeName);    //  #text A #text A #text A #text A #text
    }
    //console.log(oBox.childNodes[1].nodeName);
    // 这里只包含子节点，且包括文本节点（包括空格）
</script>
</body>

对arguments对象使用Array.prototype.slice()方法可以将其转化为数组，采用同样的方法，也可以将NodeList对象转化为数组

var arrayofNodes = Array.prototype.slice(someNode.childNodes,0)    // IE8及以下不兼容

// IE8及以下版本
function convertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice(nodes,0)
    }catch(e){
        array = new Array;
        for ( var i = 0; i < nodes.length; i ++){
            array.push(nodes[i])
        }
    }
    return array;
}

children 只读属性子节点列表的集合
标准下：只包含元素类型的节点，包含非法嵌套节点
非标准下：只包含元素类型的节点，不包括非法嵌套
parentNode属性，指向文档树中的父节点
- 包含在childNodes列表中的所有节点具有相同的父节点
- 通过previousSibling和nextSibling属性，访问同一列表中的其他节点，第一子节点和最后一个子节点的previousSibling和nextSibling为null。如果只有一个字节点的话，都为null
- 父节点的lastChild和firstChild指向第一个和最后一个子节点，只有一个节点的话，lastChild和firstChild指向相同的节点，没有子节点，为null
  firstChild 和 lastChild 标准下：包含文本类型的节点
  非标准下：只包含元素节点

var oFirst = oUl.firstElmentChild || oUl.firstChild   // 兼容
// 最好的解决方式 oUl.children[0].style.background = 'red';

var oNext = oBox.nextSibling || oBox.nextElementSibling;
var oPrev = oBox.previousSibling || oBox.previousElementSibling

操作节点

appendChild(),用于向childNodes列表末尾添加节点，如果传入到appendChild()方法的节点是已经存在的，则改变了节点的位置

<div id="box">
    <span class="span">span1</span>
    <span class="span">span2</span>
    <span class="span">span3</span>
</div>

<script>
    var oBox = document.getElementById('box');
    var aSpan = document.getElementsByTagName('span');
    //var oSpan = document.getElementById('span');
    oBox.onclick = function () {
        oBox.appendChild(aSpan[0])   
        // 被放入的父元素.appendChild(元素)   改变了现有元素的排列顺利
        // appendChild()操作的元素放入所有中的最后
    }
</script>

insertBefore() 接受两个参数，要插入的节点，和作为参考的节点，如果第二个参数不需要，则必须传入null，效果与appendChild()一样

<div id="box">
    <span class="span">span1</span>
    <span class="span">span2</span>
    <span class="span">span3</span>
</div>

<script>
    var oBox = document.getElementById('box');
    var aSpan = document.getElementsByTagName('span');
    //var oSpan = document.getElementById('span');
    oBox.onclick = function () {
        console.log('askdj')
        oBox.insertBefore(aSpan[0],aSpan[2])   // 在aSpan[2]的位置前插入aSpan[0]
        oBox.insertBefore(aSpan[0],null)       // 效果与appendChild一致
        console.log('afjkals')
    }
</script>

replaceChild() 接受两个参数，要插入的节点和替换的节点，要替换的节点将由这个方法返回并从文档中移除，同时由插入的节点占据其位置

<div id="box">
    <span class="span" id="span">span0</span>
    <span class="span">span1</span>
    <span class="span">span2</span>
</div>

<script>
    var oBox = document.getElementById('box');
    var aSpan = document.getElementsByTagName('span');
    var oSpan = document.getElementById('span');
    //var oSpan = document.getElementById('span');
    oBox.onclick = function () {
        console.log('askdj')
        oBox.replaceChild(aSpan[2],aSpan[0])    //  aSpan[2]替换了aSpan[0]的位置，方法返回移除的节点
        console.log('afjkals')

    }
    aSpan[2].onclick = function(){
        alert(oSpan.innerHTML)    // aSpan[0] 只是在文档中不存在这样位置了，但是节点仍然存在在文档中
    }
</script>

removeChild() 接受一个参数，即将要移除的节点，被移除的节点为这个方法的返回值

<div id="box">
    <span class="span" id="span">span0</span>
    <span class="span">span1</span>
    <span class="span">span2</span>
</div>

<script>
    var oBox = document.getElementById('box');
    var aSpan = document.getElementsByTagName('span');
    var oSpan = document.getElementById('span');
    //var oSpan = document.getElementById('span');
    oBox.onclick = function () {
        oBox.removeChild(aSpan[0])   // 删除该节点，且文档中没有改节点的位置
    }
</script>

Document 类型

document表示整个HTML页面，document是window对象的一个属性

文档的子节点

页面经过浏览器的解析后，其文档只包含一个子节点，即html元素

var html = document.documentElement;
console.log(html === document.childNode[0]);   // true
console.log(html === document.firstChild);    // true

document 对象还有一个body属性，直接指向body元素

var body = document.body;    // 取得body的引用

文档信息

title 通过这个属性可以取得到当前页面的标题

var oTitle = document.title;   // 取得title
document.title = 'new';     // 设置title

URL，domain，referrer
URL 包含页面完整的URL（地址栏中显示的URL），domain属性只包含页面的域名，而referrer包含链接到当前页面的那个页面的URL

查找元素

getElementById()
要注意大小写的匹配（IE8和较低版本不区分ID的大小写）
getElementsByTagName() 接受一个参数，要取得元素的标签名

<div id="box">
    <span class="span" id="span">span0</span>
    <span class="span">span1</span>
    <span class="span" name="mySpan">span2</span>
</div>

<script>
    var oBox = document.getElementById('box');
    var aSpan = document.getElementsByTagName('span');    // 将一个HTMLCollection对象保存在images变量中
</script>

HTMLCollection对象上还有一个方法，namedItem(),通过name特性取得相应的值

<div id="box">
    <span class="span" id="span">span0</span>
    <span class="span" name="mySpan">span1</span>
    <span class="span" name="mySpan">span2</span>
</div>

<script>
    var oBox = document.getElementById('box');
    var aSpan = document.getElementsByTagName('span');
    aSpan.namedItem('mySpan').innerHTML = 'yellow';  
    console.log(aSpan.namedItem('mySpan'));    // 得到一个name是mySpan的元素
    aSpan['mySpan'].innerHTML = '444'
</script>

要得到所有元素则传入''
var allEle = document.getElementsByTagName('')

getElementsByName()
返回一个NodeList，同样具有namedItem()方法，只会取得第一项
特殊集合
document.links 包含所有带href特性的<a>元素
DOM一致性检测 p259

console.log(document.implementation.hasFeature('XML','1.0'));    
// 如果浏览器支持给定名称和版本功能，则该方法返回true

文档的写入 write(),writeln(),open(),close()

<body>
<script>
    window.onload = function(){
        console.log(document.implementation.hasFeature('XML','1.0'));
        document.write('111111111111')      //  重写页面中的所有元素，包括title等只有body中留有write中的内容
    }
</script>
</body>


<script>
    document.write('111111111111');    // 在页面中添加元素
</script>

Element类型

元素节点具有以下特征
nodeType = 1
nodeName 为元素的标签名
nodeValue 值为null
访问元素的标签名，可以使用nodeName,也可以使用tagName,这两个属性返回相同的值

<div id="box">kasdjf</div>
<script>
    var oBox = document.getElementById('box');
    console.log(oBox.tagName);    // 'DIV'
    console.log(oBox.nodeName);   // 'DIV'

    if ( ele.tagName.toLowerCase() == 'div'){    // 适用于任何文档（XML，XHTML）

    }
</script>

HTML 元素

元素中指定的信息，都可以通过下列方式获得

<div id="box" title="askldfj" dir="rtl" class="red" lang="en">kasdjf</div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.id);    // oBox.title  oBox.dir  oBox.className   oBox.lang
oBox.id = 'div'     // 修改相关样式
console.log(oBox.style)    // 打印出所有的style样式
</script>

取得特性 getAttribute()

<script>
console.log(oBox.getAttribute('id'))
console.log(oBox.getAttribute('class'));    // 这种方式取得class属性传入的参数与实际的特性吗相同
</script>

特性名称并不区分大小写
根据H5规范，自定义的属性应该加上data-前缀一遍验证

设置属性 setAttritute()
- 接受两个参数，特性名和特性值，如果存在这样的值，则替换，如果特性不存在，则创建相应的值

div.setAttribute('id','someId')

//所有的特性都是属性
div.id = 'someId'

删除特性 removeAttribute()
- 不仅会删除特性的值，也会完全的删除特性

div.removeAttribute('class');

attributes 属性

console.log(oBox.id);
    console.log(oBox["id"]);
var id = ele.attribute['id'].nodeValue;
var id = element.attributes.getNamedItem('id').nodeValue;   // 取得id的属性值

var oldAttr = ele.attributes.removeNamedItem('id');
console.log(oldAttr);    // id="box"

创建元素

var div = document.createElement('div');   // 创建元素
div.id = 'div';
div.className = 'box';     // 设置属性

doucment.body.appendChild(div);

* IE7一些bug
    * 不能设置iframe元素的name特性
    * 不能通过reset()重设动态创建input元素
    * 动态创建的type特性值为reset的button元素重设不了表单
    * 动态创建的name相同的单选按钮毫无关系

    ```js
    var iframe = document.createElement("<iframe name=\"myframe\"></iframe>")
    var input = document.createElement("<input type=\"checkbox\">")
    var radio = document.createElement("<input type=\"radio\" name=\"choice\">")
    ```

元素的子节点

<ul id="myList">
    <li>kldjf</li>
    <li>kldjf</li>
    <li>kldjf</li>
</ul>

在IE中ul的childNodes包含3个子节点，只有3个li
在标准浏览器中，childNodes包含了7个子节点，3个li和li之间的空白符

DOM操作技术

操作表格

<script>
    var table = document.createElement('table');
    table.border = 1;
    table.width = "100%";
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);

    tbody.insertRow(0);      // 创建表格
    tbody.rows[0].insertCell(0);    // 第一行第一个单元格
    tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));    // 内容
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));
    tbody.rows[0].insertCell(2);
    tbody.rows[0].cells[2].appendChild(document.createTextNode("cell 2,2"));

    tbody.insertRow(1);
    tbody.rows[1].insertCell(0);
    tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,1"));
    tbody.rows[1].insertCell(1);
    tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,1"));
    tbody.rows[1].insertCell(2);
    tbody.rows[1].cells[2].appendChild(document.createTextNode("cell 2,2"));

    document.body.appendChild(table);

    tbody.rows[0].cells[0]    // 这种方法获得表格中的相应的单元格
</script>

DOM