javascript学习笔记1

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
通过ID获取元素



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=document.getElementById('con');          
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>
<h3>hello</h3>
<p id='conn'>ssss</p>
</body>
</html>
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML
注意:

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar=document.getElementById('con') ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML='ssss';
  
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>



ssss

JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。

原标题:javascript
修改后的标题:ssss
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:

Object.style.property=new style;
注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):

backgroundcolor 设置元素的背景颜色
height 设置元素高度
width 设置元素宽度
color 设置文本颜色
font 在一行设置所有字体属性
fontFamily 设置元素的字体系列
fontSize 设置元素的字体大小

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.fontsize="20";
mychar.style.bakcgroundColor="red";


</script>
</body>
</html>


注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

显示和隐藏(display属性)

 

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:

Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con").style.display="none";
        
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con").style.display="block";
        
        }
    </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> 
</html>

 

posted @ 2015-10-02 12:32  尘梦  阅读(188)  评论(0编辑  收藏  举报