HTML DOM在JavaScript中的使用

最新推荐文章于 2022-10-21 21:42:32 发布

数字改变世界

最新推荐文章于 2022-10-21 21:42:32 发布

阅读量189

点赞数

分类专栏： JavaScript JavaScript 文章标签： JavaScript React

本文链接：https://blog.csdn.net/woyaochenggong774/article/details/80444198

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 1 订阅

订阅专栏

1. JavaScript能够动态的创建HTML,主要体现在：

(1) 能够改变页面中的所有的HTML元素

(2) 能够改变页面中的所有的HTML属性

(3) 能够改变页面中的所有的CSS样式

(4) 能够对页面中的所有事件做出响应

2. JavaScript对HTML元素的改变：

通过id查找元素： var x = document.getElementById("demo");

通过标签名查找元素：

var x= document.getElementById("main")

var y = x.getElementsTagName("p")

<!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>

改变HTML输出流：document.write()可以直接向HTML中输入流内容比如---- document.write(new Date)

改变HTML内容：document.getElementById("demo").innerHTML = "需要替换成的内容"

改变HTML属性：document.getElementById('demo').attribute =new value

比如：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="a.gif">
<script>
document.getElementById("image").src="b.jpg";
</script>
</body>
</html>

改变HTML样式（css属性）：通过style改变颜色，大小等属性

<h1 id="demo">Hello World</h1>
<button type="button" οnclick="document.getElementById('demo').style.color='red'">
</button>

JavaScript HTML DOM事件

onload():用户进入时候触发

onunload():用户离开时候触发

<body οnlοad="checkCookie">
 <script>
  function checkCookies()
  {
     if (navigator.cookieEnabled==true)
	{
	alert("已启用 cookie")
	}
     else
	{
	alert("未启用 cookie")
	}
 </script>
</body>

onChange()事件结合输入字符的验证使用

onmouseover和onmouseout对鼠标的移动事件的处理

onmouseup和onmousedown以及onclick事件

创建新的HTML节点：

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

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

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

这段代码创建新的 <p> 元素：var para=document.createElement("p");

向 <p> 元素添加文本，必须首先创建文本节点。这段代码创建了一个文本节点：var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点：para.appendChild(node);

向一个已有的元素追加这个新元素：var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：element.appendChild(para);

删除已有元素：

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

数字改变世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM在JavaScript中的使用

1. JavaScript能够动态的创建HTML,主要体现在： (1) 能够改变页面中的所有的HTML元素 (2) 能够改变页面中的所有的HTML属性 (3) 能够改变页面中的所有的CSS样式 (4) 能够对页面中的所有事件做出响应2. JavaScript对HTML元素的改变：通过id查找元素： var x = document.getElementById("demo"); 通过标签名查...
复制链接

扫一扫