JavaScriptDOM操作
DOM是W3C是制定的一套技术规范，用来描述Js脚本怎样与HTML或XML文档进行交互的Web标准。开发人员通过标准方式访问文档结构、操作网页内容、控制样式和行为等。
1.1DOM节点
.DOM方法有很多。包括直接引用节点、间接引用节点、获得节点信息、处理节点信息、处理文本节点以及改变文档层次结构等。
1. 直接引用节点
有两种方式可以直接引用节点：
(1) document.getElementByld(id)方法:在文档里通过id来找节点，返回找到的节点对象且只有一个。
(2) document.getElementByTagName(tagName)方法：通过HTML的标签名在文档里查找，返回满足条件的数组对象。
下面用法：
function start() {
myDocumentElements = document.getElementsByTagName('body');
myBody = myDocumentElements.item(0);
myBodyElements = myBody.getElementsByTagName('p');
myP = myBodyElements.item(1);
}
2. 处理节点信息
可以通过setAttribute()和getAttribute()方法设置和获取节点属性：
|
element.setAttribute(attributeName,attributeValue) |
设置元素节点的属性。 |
|
element.getAttribute(attributeName) |
获取属性值。 |
3. 处理文本节点
处理文本节点主要有innerHTML和innerText两个属性。
|
innerHTML |
设置或返回节点开始和结束标签之间的HTML。 |
|
innerText |
设置或返回节点开始和结束标签之间的文本，不包括HTML标签。 |
4. 文档层级结构相关
① document.createElement()方法：创建元素节点。
② document.createTextNode()方法：创建文本节点。
③ appendChild(childElement)方法：添加子节点。
④ insertBefore(newNode,refNode):插入子节点，newNode为插入的节点，refNode为将插入的节点插入到这之前。
下面用法：
function createMessage() {
var oP = document.createElement('span');
var oText = document.createTextNode('我学Js');
oP.appendChild(oText);
document.body.appendChild(oP);
}
1.2操作DOM节点
1.1.1创建节点
下面用法：
function myFunction() {
var node = document.createElement('Li');
var textnode = document.createTextNode('开水');
node.appendChild(textnode);
document.getElementById('myList').appendChild(node);
}
1.1.2插入节点
下面用法：
function myFunction() {
var node = document.getElementById('myList2').lastChild;
var list = document.getElementById('myList1');
list.insertBefore(node, list.childNodes[0]);
}
1.1.3删除节点
下面用法：
function myFunction1() {
var list = document.getElementById('myList');
list.removeChild(list.childNodes[0]);
}
1.1.3复制节点
下面用法：
function myFunction2() {
var itm = document.getElementById('myList').lastChild;
var cln = itm.cloneNode(true);
document.getElementById('myList').appendChild(cln);
}
1.1.4替换节点
下面用法：
function myFunction3() {
var textnode = document.createTextNode('开水');
var itm = document.getElementById('myList').childNodes[0];
itm.replaceChild(textnode, itm.chilsdNodes[0]);
}
1.3使用非标准DOMinnerHTML属性
下面用法：
function myDOMInnerHTML() {
var myDiv = document.getElementById('myText');
myDiv.innerHTML = '<img src="./img/1.jpg" title="头像">';
document.write(myDiv.innerHTML);
1.4插入文本
outerText属性
下面用法：
var ul = document.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
lis[1].onclick = function () {
this.innerText = '我叫黄静远';
}
lis[2].onclick = function () {
this.innerHTML = '我在学Js';
}
lis[3].onclick = function () {
this.outerText = '我喜欢js';
}
1.5使用属性节点
属性节点由Attr类型表示，在文档树中被称为元素的特性，习惯称为标签的属性。
|
nodeType |
值为11。 |
|
nodeName |
值是特性的名称。 |
|
nodeValue |
值是特性的值。 |
|
parentNode |
值为null。 |
|
在XML中 |
子节点可以是Text、EntityReference。 |
尽管属性也是节点，但却不被认为是DOM文档树的一部分，DOM没有提供关系指针，很少直接引用属性节点。开发人员常用getAttribute()、setAttribute()和removeAttribute()等方法来操作属性。
1.5.1访问属性节点
Attr是Element的属性，作为一种节点类型，它继承了Node类型的属性和方法。
Attr对象包含了3个专用属性：
- name:返回属性的名称，与nodeName的值相同。
- value:设置或返回属性的值，与nodeValue的值相同。
- specified:如果属性值是在代码中设置的，则返回true,如果为默认值，则返回false。
下面用法：
var element = document.getElementById('box');
var attr = document.createAttribute('align');
attr.value = 'center';
element.setAttributeNode(attr);
document.write(element.attributes['align'].value + '<br>');
document.write(element.getAttributeNode('align').value);
document.write(element.attribute['align']);
1.5.2读取属性值
下面用法：
var label = document.getElementById('labell');
document.write(label.className + '<br>');
document.write(label.htmlFor);
1.5.3设置属性值
属性名和属性值必须以字符串的形式进行传递。
下面用法：
var table = document.getElementsByTagName('table')[0];
var del = document.getElementById('del');
var reset = document.getElementById('reset');
del.onclick = function () {
table.removeAttribute('border');
}
reset.onclick = function () {
table.setAttribute('border', 2);
}
1.6使用范围
DOM2在遍历和范围模块中定义了范围接口。通过范围可以选择文档中的一个区域，而不用考虑节点的界限。
1.6.1删除范围内容
范围实际上也是一个文档片段。
下面用法：
function createrange() {
var range1 = document.createRange();
var main = document.getElementById('main');
range1.setStart(main, 1);
range1.setEnd(main, 3);
range1.deleteContents();
}
1.6.2移动范围内容
下面用法：
function createrange1() {
var range1 = document.createRange();
var main = document.getElementById('main');
range1.setStart(main, 1);
range1.setEnd(main, 3);
var fragment = range1.extractContents();
main.appendChild(fragment);
}
1.6.3复制范围内容
下面用法：
function createrange2() {
var range1 = document.createRange();
var main = document.getElementById('main');
range1.setStart(main, 1);
range1.setEnd(main, 4);
var fragment = range1.cloneContents();
main.appendChild(fragment);
}
1.6.4插入范围内容
下面用法：
function createrange3() {
var range1 = document.createRange();
var main = document.getElementById('main');
range1.setStart(main, 1);
range1.setEnd(main, 4);
var h2 = document.createElement('h2');
h2.style.color = 'green';
h2.innerHTML = '[近代] 张三';
range1.insertNode(h2);
}
1.6.5高亮范围内容
下面用法：
function createrange4() {
var range1 = document.createRange();
var p = document.getElementsByTagName('p')[0];
var text = p.firstChild;
range1.setStart(text, 1);
range1.setEnd(text, 210);
var p = document.createElement('p');
p.style.color = 'orange';
p.style.fontWeight = 'bold';
range1.surroundContents(p);
}
1.6.6复制和清除范围
使用cloneRange()方法可以复制范围，新创建的范围与原来的范围包含相同的属性，而修改它的边界不会影响原来的范围。
用完范围之后，最好使用detach()方法把范围从文档中分离出来，然后就可以放心解除对范围的引用，从而让垃圾回收机制回收期内存。
下面用法：
range.detach();
range.null;
一旦分离出来，就不能再恢复使用了。
1.7实战案例
1.7.1设计动态表格
为了方便构建表格，HTML DOM为<table>、<tbody>和<tr>元素添加了一些属性和方法。
为<table>元素添加的属性和方法具体说明如下：
|
caption |
保存着对<cation>元素（如果有）的指针。 |
|
tBodies |
是一个<tbody>元素的HTMLCollection。 |
|
tFoot |
保存着对<tfoot>元素（如果有的）的指针。 |
|
tHead |
保存着对<thead>元素（如果有的）的指针。 |
|
rows |
是一个表格中所有行的HTMLCollection。 |
|
createTHead() |
创建<thead>元素，将其放到表格中，返回引用。 |
|
createTFoot() |
创建<tfoot>元素，将其放到表格中，返回引用。 |
|
createCaption() |
创建<caption>元素，将其放到表格中，返回引用。 |
|
deleteTHead() |
删除<thead>元素。 |
|
deleteTFoot() |
删除<tfoot>元素。 |
|
deleteCaption() |
删除<caption>元素。 |
|
deleteRow(pos) |
删除指定位置的行。 |
|
insertRow(pos) |
向rows集合中的指定位置插入一行。 |
|
rows |
保存着<tbody>元素的HTMLCollection。 |
|
cells |
保存着<tr>元素中单元格的HTMLCollection。 |
|
deleteCell(pos) |
删除指定位置的单元格。 |
|
insertCell(pos) |
向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用。 |
使用这些属性和方法，可以极大地减少创建表格的所需的代码数量。
下面用法：
var table = document.createElement("table");
table.border = 1;
table.width = "500";
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("ID"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("姓名"));
tbody.rows[0].insertCell(2);
tbody.rows[0].cells[2].appendChild(document.createTextNode("年龄"));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("张三"));
tbody.rows[1].insertCell(2);
tbody.rows[1].cells[2].appendChild(document.createTextNode("24"));
document.body.appendChild(table);
1.7.2在微博分享选中文本
下面用法：
function selectText() {
if (document.selection) {
return document.selection.createRange().text;
} else {
return window.getSelection().toString();
}
}
var text = document.getElementById('txt');
var weibo = document.getElementById('weibo');
text.onmouseup = function (ev) {
var ev = ev || window.event;
var top = ev.clientX;
var left = ev.clientY;
if (selectText().length > 1) {
weibo.style.display = 'block';
weibo.style.left = left + 'px';
weibo.style.top = top + 'px';
} else {
weibo.style.display = 'none';
}
};
text.onclick = function (ev) {
var ev = ev || window.event;
ev.cancelBubble = true;
}
document.onclick = function () {
weibo.style.display = 'none';
}
window.location.href =
'https://weibo.com/u/5375144838/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102&sudaref=passport.weibo.com'
浙公网安备 33010602011771号