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

8、HTML DOM总结

2016-03-18 14:39 381 查看

1、HTML DOM （文档对象模型）

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

2、DOM 方法

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>

</body>
</html>

3、JS的事件

HTML 事件的例子：

当用户点击鼠标时 onclick

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

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

<!-- ---------- -->
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<>

<!-- ---------- -->
<h1 onclick="changetext(this)">请点击该文本</h1>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button onclick="displayDate()">点击这里</button>

<!-- ---------- -->
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button id="myBtn">点击这里</button>

<!-- ---------- -->
<script>
document.getElementById("myBtn").onclick=function(){displayDate1()};
function displayDate1()
{
document.getElementById("demo1").innerHTML=Date();
}
</script>

<p id="demo1"></p>

<!-------------------------->

<div onmouseover="mOver(this)" onmouseout="mOut(this)" onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"

}

function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

4、JS的DOM节点

添加节点或者删除节点

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<!-----添加一个超链接------------->

<script>

var para=document.createElement("a");
var node = document.createTextNode("new anchor");

para.setAttribute("href","http://www.baidu.com");
para.appendChild(node);

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

<!-----删除id为p1的段落------------->
<script>

var child = document.getElementById(p1);

child.parentNode().remove(child);
</script>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航