javascript之dom操作

来源：互联网发布：忽略此网络如何恢复编辑：程序博客网时间：2024/04/30 02:02

1，认识dom

文档对象模型dom定义访问和处理HTML文档的标准方法。dom将HTML文档呈现为带有元素，属性和文本的树结构。
HTML文档中可以说是有节点构成的集合，三种常见的dom节点：1，元素节点（ html body p等都是元素节点；2，文本节点：（向用户展示内容）如li….标签中的javascript，dom,css等文本；3，属性节点：（元素属性）如a标签中的连接
2，通过id获取元素
学过html/css样式都知道网页是有标签信息将信息组织起来，而标签的id属性是唯一的，就像么个人的身份证号一样，只要通过身份证号就可以找到对应的人，那么在网页中我们通过id先找到标签再进行操作

语法:document.getElenmentById("id")\结果为null或者[object HtmlParagrahElement]

3,innerHTMl属性

innerHTML属性可以获取和替换HTML元素内容语法：Object.innerHTML注意：1，Object是获取元素的对象，如果通过document.getElementById("")获取元素2，注意书写，innerHTML区分大小写

例如：我们通过id"com"来过获取对象的p元素，并将元素的输出和该百年元素内容<title>hello world</title><body><p　id="con">helloworld</p><script>var mycon=document.getElementById("con);document.write("p标签原始内容"+mycon.innerHTML);mycon.interHTML="next text";document.write("p标签修改后"+mycon.innerHTMl);</scrtipt></body>

4,改变HTML样式

HTMLdom允许javascript改变HTML元素的样式，如何改变HTML的样式呢？

语法：Object.style.property=new style;注意：Object是获取元素的对象，如果通过document.gerElementById("")获取元素

background：设置元素的背景颜色
height：设置元素的高度
width：设置元素的宽度
color：设置文本的颜色
font：在一行设置所有字体的属性
fontFamily：设置元素的字体系列
fontSize：设置元素的字体大小
注意：该表仅仅是以小部分的css样式属性，其他样式也可以通过该方法进行设置和修改
5,显示和隐藏display属性
网页经常会看到显示和隐藏效果，可以通过display属性来设置。

语法：Object.style.display=value注意：Object是获取的对象元素value的取值none  此元素不会被显示block 此元素将会显示为块及元素

6,控制类名(className属性）
className属性设置或返回元素的class属性

语法：Object.className=classname作用：1，获取元素的class属性2，为网页内的某个元素制定一个css样式来更改该元素的属性和外观

<body><styel type="text/css">input{    font=size:10px;    }    .ont{    width:200px;    background-color:#CCC;    }    .two{    font-size:18px;    color:#F00;    }</style><script type="text/javascript">var mychar=document.getElementById("con");document.write("p元素class值为:"+mychar.className");function modifyclass(){    mychar.className="two";    }</script><p id="con" class="one">javascript</p> <form>    <input type="button" value="点击更改" onclick="modifyclass()"/></body>

0 0