一、认识DOM
文档对象模型DOM(Document Object Model),定义访问和处理HTML文档的标准方法。
DOM将HTML文档呈现为带有元素、属性和文本的树结构。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1、元素节点:<html><body><p>等都是元素节点,即标签
2、文本节点:向用户展示的内容,<li>……</li>中的内容。
3、属性节点:元素属性,如<a>标签的链接属性href
二、通过ID获取元素
document.getElementById("id");
三、innerHTML属性
innerHTML属性用于获取或替换HTML元素的内容
扫描二维码关注公众号,回复:
2770883 查看本文章
语法:object.innerHTML
1、object是获取的元素对象,如通过document.getElementById("ID");
2、innerHTML区分大小写
四、改变HTML样式
Object.style.property=new style;
基本属性表(property)
属性 | 描述 |
backgroundColor | 设置元素的背景颜色 |
height | 设置元素的高度 |
width | 设置元素的宽度 |
color | 设置文本的颜色 |
font | 在一行设置所有的字体属性 |
fontFamily | 设置元素的字体系列 |
fontSize | 设置元素的字体大小 |
例子:
改变 <p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:
<p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue"; </script>
五、显示和隐藏(display属性)
语法:
Object.style.display=value
value的值:
none 此元素不会被显示(即隐藏)
block 此元素将显示为块级元素(即显示)
<script type="text/javascript"> function hidetext() { var mychar = document.getElementById("con"); } function showtext() { var mychar = document.getElementById("con"); } </script> </head> <body> <h1>JavaScript</h1> <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> <form> <input type="button" onclick="hidetext()" value="隐藏内容" /> <input type="button" onclick="showtext()" value="显示内容" /> </form></body>
六、控制类名(className属性)
语法;
object.className =类名
作用:
1、获取元素的class属性
2、为网页内的某个属性指定一个css样式来更改该元素的外观
<style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> </head> <body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className="two"; } </script> </body>