javascript的操作DOM的属性

DOM

JavaScript分三个部分

ECMAScript标准: JS 的基本语法

DOM: Document Object Model ---> 文档对象模型-----操作页面的元素
BOM: Browser object Model...--.浏览器对象模型-- 操作的是浏览器

DOM: 文档对象模型

*文档:把- -个htmL文件看成是- -个文档，由于万物皆对象，所以把这个文档看成是一个对象

* XML文件也可以看成是一个文档

*HTML：展显示信息，数据

*XML：重点在于存储

htmL文件看成是一个文档，那么这个文档看成是一个对象，文档中的所有的标签都可以看成是一个对象

*页面中的每个标签，都是一个元素(element), 每个元素都可以看成是一个对象*标签可以嵌套，标签中有标签，元素中有元素

* htmL页面中都有一个根标签-html--也叫根元素

*页面中的有一一个根元素(标签- -htmL),里面有很多的元素(有很多的标签，有很多的对象)

*元素:页面中的所有的标签都是元素，元素可以看成是对象

*节点:页面中所有的内容都是节点:标签,属性，文本

Dom分类

核心DOM :是提供了操作HTML和XML文档的各种属性，定义了一些公共的属性和方法。

XML DOM :针对XML操作的接口,也是一些属性和方法。

HTML DOM :针对HTML文档操作的接口,也是一些属性和方法。

Event DOM :事件对象模型，提供了一些常用的事件。比如: onclick、 onload、 onchange

CSS DOM :让]S去操作和访问CSS的各种属性。

Document对象:

title属性

操作当前文档的标题

function getTitleO{

alert(document. title);

}

function setTitleO{

document.title = "设置标题";

}

URL属性

返回当前文档的URL。

function geturl(){

alert(document. URL);

}

Write()方法向文档写文本。HTML表达式或者javascript代码

Document.write(“维生素”);

DOM操作之节点操作

整个文档是一个文档节点(Document)

每个HTML标签是一个元素节点(Element)

1 document.write("我是一个兵<br/>");

三、DOM操作之节点操作

整个文档是一个文档节点(Document)

每个HTML标签是一个元素节点(Element)

性。每一个HTML属性是一个属性节点Atribute是指元素中所有的属性构成的节点列表，个标记有多个属

包含在HTML元素中的文本是文本节点(Text)是最底层的节点，它下面不能再有其它子节点。

一个HTML文档，只有一个根元素，就是<htm1>标记

父节点(parentNode):当前节点的上一级元素;

子节点(childNode):当前节点的下一-级元素:

兄弟节点:相邻的两个节点，同属于一个父节点。

如: <htm1>

<head>

<title>文档标题</title>

</head>

<body>

<h1>我的标题</h1>

1

a href-"http: //www. baidu. com">我的链接</a>

12

</body>

13

</html>

1、获取节点(dom对象的方法和属性)

获取节点(js方式获取DOM节点)获取html中的标签元素

10

<h1>我的标题</h1>

1

a href-="http://www. baidu . com"我的链接</a

12

</body>

1

</html>

1、获取节点(dom对象的方法和属性)

获取节点(is方式获取DOM节点)获取htmI中的标签元素定位到html元素

document.getElementByld);

返回单个DOM元素节点

document.getElementsByName();

返回多个元素根据name属性值

document.getElementsByTagName0;

返回多个元素根据标签名

document.querySelectorAll();

返回多个元素根据选择器(可以是基本选择器，还可以是其它选

择器)

注意:后面三个是返回节点数组,注意使用方法

<div id="box">he1lo NodeType !~</div>

2

<u1 id="nav">

3

first list

<1i id="testli" name="listlist">列表01</1i>

5

<1i id=" testlist">列表02</1i>

<1i>列表03</li>

<1i>列表04</1i>

best list

</u1>

//元素节点

var element1=document. getElementById("box");alert(element1);

var element2=document. querySelectorAll("#box")[0];alert(element2);

设置或获取节点的属性值

dom元素属性(只能是标准属性设置或获取标签的文本内容

dom元素.innerText

设置或获取标签的文本内容(识别标签)

dom元素.innerHTML

案例一:设置、查看src属性

1<img src=" img/logo.png" id="img"/>

2 <button οnclick="getAttr();">查看属性</button>

function getAttr(){

var img=document.getE1ementById(" img");

alert(img.src);

alert(img.id);

}

//修改src属性

img.src="img/mai.png";

<button onclick-"setAttr（）设置属性</button>

function setAttr(){

//元素节点
var element1=document . getElementById("img");

element1.src = " ../img/mai. jpg"

ต案例-: innerText innerHtml方式区别· ป

function setIText(){

var tag ="<p>郭德纲的 </p>";

var objNode = document. getElementById("nav");

objNode. innerText=tag;

}

function setIHtm1(){

var tag = <p>口袋空空 </p> ;

var objNode = document . getE lementById("nav");

objNode. innerHTML = tag;

}

10

综合练习:全选

<input type-"'checkbox" name="all"

oncick=checkAll(this)"/>全选 <br>

<input type=" checkbox" name="child" οnclick="checkChi1d()"/>子

<br />

<input type="checkbox" name=" child" onclick"checkChild0"/>子<br />

function checkA11(){
或者父复选框的选中 true//false
f1ag true选中 false 未选中

var. flag=document.getE1ementsByName("al1")[0]. checked;

//获取所有的子复选框

var chi 1dNode=document. getE ementsByName("child");for(var i=0; i<chi 1dNode. length;i++){

chi dNode[i]. checked=f1ag:

}

}

//子复选框去计算父复选框是否被选中思考

function checkchild(){

//获取子复选框的个数

var childNode=document . getE lementsByName("child");

</a>

上例属性有(属性= "属性值")如: href id class style

<div id="box”>he1lo NodeType!~</div>

<u1 id="nav">

first list
<1i id="test1i"name="listlist">列表01</1i><1i id="testlist">列表02</li>

<1i>列表03</li>

<1i>列表04</1i>

best list

</u1>

//元素节点

var element1=document. getE lementById("box");

var element2=document. queryselec torAllC "#box")[0];document. wri te(e lement1. nodeName+"名<br/>");

document . write(element2. nodeName+"名<br/>");

document . write(e lement1. nodevalue+"值<br/>");//值为nu11document . write(e lement2. nodeValue+"值<br/>' );

document. wri te(e lement1. nodeType+"类型<br/>"D;//1元素节点document . write(element2. nodeType+"类型<br/>");//1元素节点

注意: getAttributeNode0方法用来得到属性节点对象，而节点属性方式是操作(设置与查看)属性直

//获取属性节点方法getAttributeNodeO

var attr1=document . getElementById("nav"). getAttributeNode("id");var attr2=document. getElementById("nav"). id;

//用节点属性只能访问与设置属性值只能操作属性不是返回节点对象,因为他不是一个对象所以没有节点对象的方法和属性

document . write("节点名字: "+attr1. nodeName+"<br />");document.write("节点名字: "+attr2. nodeName+"<br />");document.write("节点值: "+attr1. nodeValue+"<br />");
document . write("节点值: "+attr2 . nodeValue+"<br />");
document. write("节点类型: "+attr1. nodeType+"<br />");
document . write("节点类型: "+attr2. nodefype+"<br />");
var textNode= document. getE lementById("nav"), lastChiId;
document,write("节点名字"+textNode, nodeHame+"br />");
document,write("节点值"+textNode，nodeValue+"dbr />");
document,write("节点类型"+textNode,nodeType);

3、文档节层次操作

父节点

上一个最次的节点parentNode 得到父结点对象 (标签)

子节点

注意:元素节点间的空格和回车

所有子节点

childNodes返回的是子节点集台,使用子节点时注意数组chlldNodes[]

第一个子节点

fIrstChild

返回节点的第一个子节点通常用这方法访问该元素的文本节点

最后一个子节点lastChld

返回节点的最后一个子节点通常用这方法访问该元素的文本

节点

兄弟节点

nextSibling

下一个节点(含文本节点)

nextElementSlbling 下一个元素节点

previousSibling上个节点 (含文本节点)prevlousElementSlbllng上一个元素节点

操作节点

操作节点属性

//前面介绍方法元素属性名操作元素的属性

setAtribute("属性名","属性值")

给一个节点增加/修改属性值

getAttribute("属性名");

获取一个属性的值

removeAttribute("属性名");

删除节点的属性

举例: <img /> img. setAttribute("src" ,"images/bg.gif")

案例:

<img src="img/dog. jpg" id=" imageid"/>

<button οnclick="getAttr()">查看属性 </button><button οnclick="setAttr()">设置属性 </button><button οnclick="delAttr()">删除属性</button>

function getAttr(){

alert("getAttributeO方式: "+node. getAttr ibute("'src"));alert("元素节点属性方式: "+node.src);

function setAttr(){

var node = document. getE lementById("imageid");

//node. src="img/mai. jpg";//属性方式

node. setAttribute("src" ,"img/mai. jpg") //getAttribute()方式
}

function delAttr(){
var node = document. getE ementßyId("imageid");
node.src="";//给空值,
node. removeAttribute("src");

B.节点的值

元素的节点可以用InnerHtml属性向html标签中添加一个标签document.createElement("");

<div id="box">he1lo NodeType !~</div>

<u1 id="nav">

first list

<1i id="testli" name="listlist">01</1i><1i id=" testlist">02</1i>

<1i>03</1i>

<1i>04</1i>

best list

</u1>

function addNode(){

var objNode = document. createl lement("img");
objNode.src="img/dog.jpg"://两种操作属性的方式objNode .setattr ibute("src","img/mai, jpg");var pnode = document.getE lementbyId("nav");pnode, appendch11d(ob jNode);

C、创建文本节点

document.create TextNode("这贯我新加的内容");注意;这里只能是纯文本

<button onclck"addTextNode()">创建文本节点</button>
function addTextNode(){

var textNode=document. createTextNode(“是我新加的内容");var pnode=document . getElementiyId("nav");

pnode .appendChild(textNode);

D、迫加节点

在目标节点的后增加

appendChild(node):将一个节点追加到某个父节点中子节点的最后位置。如: A.appendChlld(B); //在A节点的末尾追加子节点B

E、插入节点
插入新节点，要确定在父节点中增加的位置，位于哪个子节点之前。pnode.insertBefore(newNode,currNode);
pnode:目标父节点pnode:目标父节点pnode:目标父节点currNode :哪个子节点之前

如:A.insertBefore(B,C);/l在A节点下加入新节点B插入的位置是在C节点前面。F、复制节点

cloneNode(true |false);/l复制节点true完全复制 false节点本身不含子节点注意:复制的元素节点如果节点含id属性必须修改

案例︰

<div id="box">he1lo NodeType !~</div>

first list

best list

</ul>

//插入复制节点

function copyInsert({

Var pode=document.getE1ementById(“nav”)；

var copyNode = pnode.cloneNode(true);//完全复制

Var inode=document.getElementById(“listlist”)；//确定！

pnode.insertBefore(copyNode ,inode);

}

6、删除节点

用来删除父节点中的一个子节点

Pnode.emovechild(DelNode)；！l移除子节点

delNode :要删除的目标子节点<button onc1ick="de1Node(">删除节点</button>

//删除节点

function de1Node(){

var pnode = document.getE1ementById("nav");//确定父节点

var de1Node = document.getElementById("listlist");//确定删除的节点

pnode.removeChild(de1Node);//移除子节点
}

替换节点

用新节点替换某个子节点

pNode.replaceChild(newNode,oldNode);

//替换节点

function repNode(){

var pNode = document.getElementById("nav");//确定父节点

var oldNode = document.getE1ementById("listlist");

var newNode = document.createE1ement("7i");//创建节点

newNode.innerHTML ="这是新的标准标记";

pNode.replaceChild(newNode , oldNode);//替换节点

5、节点样式

每一个HTML标签都有一个叫style属性，它对应元素对象style，该对象的属性与CSS中的属性名字一—对应。

A、行内样式

语法∶目标结点.style.cssText = "行内样式"

目标结点.style = "行内样式”兼容性不好

注意∶该方式操作行内样式如果没有设置过，不可读取，哪怕有默认样式也不行。

ps∶任何操作样式方法均可使用getComputedStyle()方法取层叠计算后的样式对象如: var widthTest = getComputedStyle(目标节点，null).width;

B、类样式

语法︰目标结点.className= "类样式";

注意:对于class属性必须使用clasName属性名，因为class的保留字。

.teststyle{

color: red;

font-size: 30px;

}

<p id="text">文本内容</p>行内样式

var text = document.getElementById( "text");

text.style = "color : red ; ";

类样式

var text = document.getE lementById( "text");

text.className="teststyle";

CSS属性值和DOM的style属性值之间的映射

HTML中的CSS样式

DOM中的CSS样式

background-color

backgroundColor

background-image

backgroundImage

background-repeat

backgroundRepeat

font-family

fontFamily

font-size

fontSize

font-style

fontStyle

border-style

bordestyle

color

text-align

textAlign

cursor

position

top, left, bottom, right

width, height

z-index

zlndex

visibility

overflow

6、this关键字

this做为实参传入函数中，this指的是当前的节点

1<input type="checkbox" name="a17" οnclick="checkA17(this)"/>全选<br />

/全选按钮

function checkA17(x){

/ /

或父复选框的选中情况true/false

/ /

flag true选中false未选中var f1ag=x.checked;

//获取所有的子复选框

var childNode=document.getE1ementsByName("child");

for(var i=0; i<childNode. 1ength;i++){

childNode[i].checked=flag;

}

小结

节点操作:访问、属性、创建

( 1)节点的访问:firstChild、lastChild、childNodes、parentChild(父子节)

可以使用元素对象的方法进行代替:getElementByld()、getElementsByTagName()

(2)节点属性的操作:setAttribute()、removeAttribute()、getAttribute()

( 3）节点的创建、删除、追加∶

创建节点:document.createElement(tagName)

复制节点: A.cloneNode(true/false);复制A节点(true完全复制false节点自身)

删除节点(必须父节点下的子节点才能被删除): parentObj.removeChild(nodeobj)

追加节点: parentObj.appendChild(nodeObj);

插入节点: parentObj.insertBefore(new,current) :兄弟节点

上一个兄弟节点

previousElementSibling

下一个兄弟节点

nextElementSibling

第一个兄弟节点

firstNode

最后一个兄弟节点

lastNode

补充︰元素对象的属性

tagName :取一个标记的名称，同nodeName一样;

innerHTML∶指标记对中的HTML文本(含有HTML标记的文本)，一般指双边标记;比如︰

二级标题

style :对应HTML标记的style属性;id :对应HTML标记的id属性;

offsetwidth:指元素的宽度，不含滚动条中的内容;

offsetHeight:指元素的高度，不含滚动条中的内容，是只读属性;