window.document对象

一查找元素

1、找元素

<script type="text/javascript">
    </script>

id查找

document.getElementById("id名字");

根据class找

document.getElementsByClassName("class名字");

根据标签名字找

document.getElementsByTagName("标签的名字");

表单可以用name找

document.getElementByName("name的值")

2、对应css里面

<style type="text/css">
        </style>(只能写在head里)

id是#加id名{ }

class是.加class名{ }

标签直接用标签名{ }

二实例

JS中id和css中id

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
		 	#s{
				width:300px;
				height:300px;
				background-color:#0F0;
				}  
        </style>
    </head>
    
    <body>
        <div id="s"></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s")
    </script>

 

JS中class和css中class

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
		 	#s{
				width:300px;
				height:300px;
				background-color:#0F0;
				}
			.d{
				border:2px solid #F00;
				}  
        </style>
    </head>
    
    <body>
        <div id="s" class="d"></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d")
    </script>

 

JS中标签和css中标签

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
		 	#s{
				width:300px;
				height:300px;
				background-color:#0F0;
				}
			.d{
				border:2px solid #F00;
				}
			div{
				color:#F0F;
				}	  
        </style>
    </head>
    
    <body>
        <div id="s" class="d">你在</div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
    </script>

 

三操作

操作内容

a.innerHTML="修改后的内容"

	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.innerHTML="<font color='green'>我我我</font>"
    </script>

 

a.innerText=''修改后的内容''

	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.innerText="<font color='green'>我我我</font>"
    </script>

 

操作属性

a.setAttribute("属性名","属性值")修改或者添加属性

    <body>
        <div id="s" class="d"><font id="f" color="#000000">你在</font></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("f");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.setAttribute("color","#666")
    </script>

 

a.getAttribute("属性名")获取属性

a.removettribute(属性名")移除属性

    <body>
        <div id="s" class="d"><font id="f" color="#000000">你在</font></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("f");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.getAttribute("color")
		a.removeAttribute("color")
    </script>

 

操作样式

a.style.样式名=''修改后的样式值"

只能获取内联样式不能获取内嵌和外部样式但是都能修改

var w=a.style.backgroundColor在下面例子中无效获取不了背景色因为是内嵌;a.style.backgroundColor="#666"有效;能改

    <body>
        <div id="s" class="d">你在</div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.style.backgroundColor="#666"
    </script>

 

 

posted @ 2017-10-26 11:29  navyyouth  阅读(270)  评论(0编辑  收藏  举报