JS中的DOM

简介:

JS HTML DOM

 

Js可以创建动态的HTML

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

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

3:能够对页面中的所有事件做出反应

 

 

一:使用JacaScript可以操作HTML元素,但是要做到这个事情需要先找到该元素,有3种方法:

1:使用ID找到HTML元素    document.getElementById(ID)//获得指定ID值的对象

例子:

<!DOCTYPE html>

<html>

<body>

<p id=”a”>Hello World!</p>

<script>

x=document.getElementById("a");

document.write(x.innerHTML);

</script>

</body>

</html>

 

 

2:使用标签吗找到HTML元素 document.createElement(Tag) //创建一个html标签对象

例子:

<!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:通过类名查找HTML元素     document.getElementsByName(Name)//获得指定Name值的对象

 

 

 document.write() 

注意:内容的语法是innerHTML

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

 

例如document.write() 可以改变HTML内容

<p id=”a”>aaaaa</p>

document.getElementByid(“a”).innerHTML=”bbbbb”

上面P标签的内容会变成bbbbb

 

 

三 HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变样式的语法

dcunmen.getElemenByID(ID).style.property=new style

 

例子

<!DOCTYPE html>

<html>

<body>

 

<p id="p1">Hello World!</p>

<p id="p2">Hello World!</p>

 

<script>

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script>

 

<p>上面的段落已被一段脚本修改。</p>

 

</body>

</html>

 

 

四:节点的添加和删除

添加节点

<div id=”div1”>

<p id=”p1”>这是第一句话</p>

<p id=”p2”>这是第二句话</p>

</div>

<script>

Var para=document.createElement(“p”);  //创建一个新元素

Var node=document.createTextNode(“这是新的一句话”)//如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

Para.appendChild(node); //p元素后面追加上面的文本节点;

 

Var element=document.getElmentById(“div1”); //找到这个元素

Element.appendChild(“para”);  //向上面的元素追加新元素,也就是p元素

</script>

 

删除节点

 

想要删除HTML元素必须获得该元素的父元素

<div id=”div1”>

<p id=”p1”>这是第一句话</p>

<p id=”p2”>这是第二句话</p>

</div>

上面的例子中 div元素中有2p元素,divp元素的父元素

所以:

先找父元素var fu=document.getElementById(“div1”);

在找子元素 var zi=document.getElementById(“p1”);

从父元素中删除子元素 fu.removeChild(child);

 

还一种方法是使用parentNode的属性来找到父元素进行删除

找到子元素 var zi=document.getElementById(“p1”);

然后删除   child.parentNode.removeChild(zi);

 

 

本文转自 新网学会 51CTO博客,原文链接: http://blog.51cto.com/xwxhvip/1978629,如需转载请自行联系原作者

相关文章
|
29天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
19小时前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
6 2
|
1天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
20天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
14 2
|
20天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
19 1
|
20天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
21天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
25 1
|
29天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
19 2
|
29天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
16 0
|
29天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
19 0