您的位置：首页 > Web前端 > JavaScript

javascript DOM编程基础

2016-03-03 16:49 555 查看

DOM doccument object model 文档对象模型

Js 中对象分为三类：用户定义对象内建对象（javascript提供）宿主对象（浏览器）

树

<html>
<head>
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this.</p>
<ul id="purchases">
<li>bean</li>
<li>cheese</li>
<li>milk</li>
</ul>
</body>
</html>

节点

元素节点
都属于元素节点

文本节点元素中包含的文本

属性节点注释就是属性节点还有标签中的title

因为属性总是放在起始标签里，所以属性节点总是包含在元素节点

5.css 层叠样式表可以放在文档的部分，也可以在另一个样式表里

语法结构： selector{

property:value;

}

class属性

<p class="special">This is a special class</p>
<h2 class="special">So do this headline</h2>

.special{
font-style:italic;//为所有元素定义一种共享的样式

}

h2.special{
text-transform:uppercase;//为特定的类型元素定义一种独享的样式
}

id属性定义一个对无二的标志，每个元素只能有一个id属性值

<ul id="purchases">

#purchases{
border:1px solid white;
background-color:#333;
color:#ccc;
padding:1em;
}

getElementById 参数是想获得的元素的id属性值

document.getElementById("purchases")//返回一个对象

getElementsByTagName 返回一个对象数组，

for(var i=0;i<document.getElementsByTagName("li").length;i++)
{
alert(typeof document.getElementByTagName("li")[i]);//返回一个数组 长度为3
}
//简介的代码，可以把它赋值给一个变量
var items=document.getElementsByTagName("li");
for (var i=0;i<items.length;i++)
{ alert(typeof items[i]);
}

getAttribute()

ar paras=document.getElementsByTagName("li");
for (var i=0;i<paras.length;i++)
{ alert(paras[i].getAttribute("title"));//弹出 a gentle reminder
}

//当不存在title时，返回值为null,为提高代码可读性，存在时才弹出消息
var paras=document.getElementsByTagName("li");
for (var i=0;i<paras.length;i++)
{ var title_text=paras[i].getAttribute("title");
if(title_text)
alert(title_text);
}

setAttribute() 检索出来并修改title

var shopping=document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");//对已有的元素节点增加title属性值

var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++)
{ var title_text=paras[i].getAttribute("title");//首先找到p标签的名字
if(title_text)
{  paras[i].setAttribute("title","brand new title text");//然后把所有的名字换掉
alert(paras[i].getAttribute("title"));//打印出来
}

}

通过窗口打印出来的值发生了变化，但是查看源代码，仍然是原来的值。也就是说setAttribute()方法的修改不会反映在源代码中。

原因：DOM的工作模式是先加载文档的静态内容，再以动态的方式进行刷新，动态的刷新不影响静态的内容。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航