开发者社区> 技术小牛人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JAVA中获取安装路径、运行路径、执行路径的办法
JAVA中获取安装路径、运行路径、执行路径的办法
82 0
JS获取DOM元素
1、childNodes:获取子节点,不同浏览器表现不同;  IE:只获取元素节点;  非IE:获取元素节点与文本节点;  解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 2、children:获取元素子节点,浏览器表现相同。
675 0
js中的弹框
js中的弹框
883 0
DOM-------2
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
483 0
JS和DOM的关系
DOM对象 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。 根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API)。
721 0
如何获取浏览器的DNS解析时间
上一篇博客提到09年初WED团队开发的浏览器环境检测工具时,忘记说这个是aoao同学的创意了。不过没关系,据说他又在秘密规划新版本了,再据说新版要增加的DNS解析时间计算已经开发完成,点上面那个链接就可以抢先体验。
825 0
通过代码获取res里生成R.java中的值
引用:http://my.eoe.cn/blue_rain/archive/552.html 有的时候我们生成库文件,需要在里面加入一些UI,并提供出一些xml的资源,那如何在其他项目中使用呢? 我们只需要在需要生成库文件的代码中不要直接是用R. ,而是使用自己写的方法获取。
766 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载