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

JavaScript整理（2）--DOM

2015-08-02 10:45 691 查看

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

改变 HTML 输出流

<script>
document.write(Date());
document.write("<p>My First JavaScript</p>");
</script>

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

document.getElementById("p1").innerHTML="New text!";

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

改变 HTML 属性

document.getElementById(id).attribute=new value

document.getElementById("image").src="landscape.jpg";

改变 HTML 样式

document.getElementById("p2").style.color="blue";
<button type="button" onclick="document.getElementById('id1').style.color='red'">  点击这里！</button>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

JavaScript 有能力对 HTML 事件做出反应。

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
<h1 onclick="changetext(this)">请点击该文本</h1>

使用 HTML DOM 来分配事件

<script>
document.getElementById("myBtn").onclick = function(){ displayDate() };
</script>

<body onload="checkCookies()">
<input type="text" id="fname" onchange="upperCase()">

创建新的 HTML 元素

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

创建 JavaScript 新对象,有两种不同的方法：

定义并创建对象的实例
使用函数来定义对象，然后创建新的对象实例

创建直接的实例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器

<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

把属性添加到 JavaScript 对象

通过为对象赋值，向已有对象添加新属性：

person.address = "USA";

把方法添加到 JavaScript 对象, 方法只不过是附加在对象上的函数。

<script>
function person(firstname,lastname,age,eyecolor)
{
<span style="white-space:pre">	</span>this.firstname=firstname;
<span style="white-space:pre">	</span>this.lastname=lastname;
<span style="white-space:pre">	</span>this.age=age;
<span style="white-space:pre">	</span>this.eyecolor=eyecolor;

<span style="white-space:pre">	</span>this.changeName=changeName;
<span style="white-space:pre">	</span>function changeName(name)
<span style="white-space:pre">	</span>{
<span style="white-space:pre">	</span>    this.lastname=name;
<span style="white-space:pre">	</span>}
}
myMother=new person("Steve","Jobs",56,"green");
myMother.changeName("Ballmer");
document.write(myMother.lastname);
</script>

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象

JavaScript 基于 prototype，而不是基于类的。
(以上内容摘自http://www.w3school.com.cn)

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

标签：

相关文章推荐

新的分享

章节导航