2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

JavaScriptDOM操作

js笔记宝典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.inner中比需抖接朋功要朋插HTML = '<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.inner中比需抖接朋功要朋插Text = '我叫黄静远';

}

lis[2].onclick = function () {

this.inner中比需抖接朋功要朋插HTML = '我在学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个专用属性:

下面用法:

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.inner中比需抖接朋功要朋插HTML = '[近代] 张三';

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'

 

本文来源于网络:查看 >
« 上一篇:css整理之-----------技巧、黑魔法
» 下一篇:(办公)html5与css3的相关知识
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-02-27中奖名单(每日10名)
×添加代码片段