js之Dom

来源：互联网发布：网络澳门赌博编辑：程序博客网时间：2024/06/16 13:14

当前主流的动态Web开发技术:

动态：网页的内容，可以在不同的事件，对不同的客户呈现出不同的内容。

DHTML：动态的页面，页面的表现，样式是可以随着用户的操作而发生不同的变化。

即：HTML+CSS+javaScript将这三项技术整合在一起。

1. BOM:

浏览器对象模型，用来访问和操作浏览器窗口，使用JavaScript有力与浏览器“对话”。通过使用Bom，可以动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作。

l Window

l History

l Location

l Document

l Screen

l Event

l navigator

2. DOM:html页面中的每一个元素都被js理解成一个dom对象。

定义了访问和操作 HTML文档的标准方法，应用程序通过Dom对象操作，来实现对HTML文档数据的操作。

Dom中所有的部分共同组成了一棵文档树，树根式document对此象,每个元素，属性，文本都代表着一个节点。

节点：

1. Document node

2. Element node

3. Text node

4. Attribute node

5. Comment node

l Dom树

1. Dom元素树:

以document对象为根，每个Html标签都是元素树的一个节点

2. Dom节点树:

以document对象为根，每个标签，文本，属性，注释等都是节点树的一个节点。

l Node对象的几个属性

1. parentNode: node类型当前节点的那个唯一的父节点

2. childnodes: nodeList类型当前节点的所有字节点,组成一个类数组对象

3. firstChild:node类型，指的是当前节点的第一个子节点

4. lastChild:node类型,指当前节点的最后一个子节点

5. nextSibling:node类型,指当前节点的下一个兄弟节点

6. previousSibling:node类型，当前节点前一个兄弟节点

7. nodeName:String类型

8. nodeType: Number类型

9. nodeValue:String类型

Dom操作:

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document</title>

<metaname="Generator" content="EditPlus">

<metaname="Author" content="">

<metaname="Keywords" content="">

<metaname="Description" content="">

</head>

<body>

<h2>ElementNode.innerHtml</h2>

<divid="main">一个<span>区</span>块</div>

var n= document.lastChild.lastChild;

vardiv=n.firstChild.nextSibling.nextSibling.nextSibling;

var div=document.getElementById('main')

div.innerHTML='新闻标题';

</script>

</body>

</html>

属性集合

可以通过如下的方法读取属性的值：

修改属性:

删除一个属性节点:

判断是否有属性：

l 与元素节点的属性相关的Dom属性:

1. Element.attributes //获取元素节点的所有属性节点

2. Element.attribute[‘属性名’] //获取元素身上指定的属性的值

3. Element.getAttribute(‘属性名’) //获取元素身上指定属性的值

4. Element.setAttributeNode(attrNode)//修改某个属性的值

5. Element.removeAttribute(‘属性名’) //删除指定的属性

通过ID号选取某个子元素:

(1) document.getElementById(‘id’);//ElementNode

(2) document/node.getElementsByTagName(‘标签名’);//NodeList

(3) document.getElementsByName(‘name属性的值’);//nodelis

(4) document/node.getElementsByClassName(‘具备指定的class名’)//nodelist

(5) document/node.querySelector(‘css选择器’)//ElementNode,返回第一个匹配元素

(6) document/node.querySelectionAll(‘css选择器’)//nodelist,返回所有的元素

(7) document.all:NodeList,获取HTML中所有元素节点对象

(8) document.documentElement:获取页面中的html标签

(9) document.body:获取页面元素中的body标签

l 创建新节点:

(1) 创建新的属性节点

Var attr=document.createAttributenode(‘属性名’);

Attr.value=’属性值’;

Element.setAttribute(attr);

(2) 创建新的元素节点

Var ele =document.createElment(‘元素名’);

parent.appendChild(ele)

(3) 创建新的文本节点

Var txt=document.createTextNode(‘文本内容’);

Parent.appendChild(txt);

(4) 创建一个新的注释节点

Var comment=document.createComment(‘注释内容’)

(5) 创建一个新的文档片段节点

Var fragment=document.createDocumentFragment();

Fragment.appendChild(xxx);

Parent.appendChild(fragment);

说明：把一个新创建的节点添加到现存的dom树上，可以使用如下两个方法:

1. Parent.appendChild(newChild);

2. Parent.insertBefore(newChild,existingChild);

Json字符串装换为json对象的方法:

1. Eval();

2. JSON.parse()

l 文档树:

l 节点数

1. 节点属性:

nodeType nodeName,nodeValue

2. 节点树遍历:

parentNode.childNodes.firstChild,lastChild,nextSibling,previousSibling

l 元素树

1元素节点属性:

e.innerHTML,e.innerText,e.textContent

2元素节点遍历:

patentElementNode,children,firstElementChild,lastElementChild,nextElementSibling,previousElementSibling.

3元素节点方法:

e.getAttribute(‘’)

e.attributes[‘’]

e.setAttribute()

e.setAttributeNode();

e.hasAttribute()

document.getElementById()

document.getElementsByTagName()

document.getElementsByName();

document.getElementsByClassName()

e.querySelector();

e.querySelectorAll();

document.documentElement

document.body

document.all[‘’]

Dom操作:

document.createElement(‘div’)

document.createAttribute(‘class’);

document.createTextNode(‘文本’)==e.innerHTML;

document.createComment(‘注释内容’)

document.createDocumentFragment();

e.setAttributeNode(newAttr);

e.appendChild()

e.insertBefore(newnode,exitsnode)

注意： <script src=”1.sj” >dsfsa</script> 当引入了javascript以后就不要在里面加脚本了，加了不会执行的。

(1) DOM节点之删除一个元素节点

Var deleteChild=parentNode.removeChild(existingChild)

(2) Dom节点之替换一个节点

Var replacedChild=parentNode.replaceChild(newChild,existingChild);

(3) Dom节点之删除属性节点

Element.removeAttribute(‘属性名’);

Element.removeAttributeNode(attrNode);

<body>

<ulid="menu">

</ul>

<buttononclick="deleteE();">删除</button>

<buttononclick="replaceLi()">替换</button>

<scripttype="text/javascript">

functiondeleteE(){

varul=document.getElementById('menu')

ul.removeChild(ul.lastElementChild);

}

function replaceLi(){

varul=document.getElementById('menu');

var newLi=document.createElement('li');

newLi.innerHTML='招聘';

ul.replaceChild(newLi,ul.lastElementChild);

}

</script>

</body>

0 0