DOM编程

时间  2020-11-28
标签 javascript css html java 编程 后端 app ide 函数 栏目 HTML 繁體版
原文   原文链接

1、DOM简介javascript


        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
css

能够将每一个HTML标签都作为一个对象，JavaScript经过调用DOM中的属性、方法就能够对网页中的文本框、层等元素进行编程控制。html



选择器：java

  • document.getElementById('id')编程

  • document.getElementsByName('name')后端

  • document.getElementsByTagName('tagname')app


实例演示1、修改单个标签中的文本内容。ide

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 经过标签ID获取到标签对象 -->
var name1 = document.getElementById('n1');
<!-- 修改标签文本内容为'tuchao' -->
name1.innerText = 'tuchao';
</script>


实例演示2、经过标签name修改多个标签的内容函数

<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
<!-- 经过标签name获取到标签对象 -->
var name2 = document.getElementsByName('n2');
<!-- 当获取到多个同name标签时，则经过序号来区别，name2[0]表示第一个，name2[1]则表示第二个 -->
name2[0].innerText = 'tuchao';
name2[1].innerText = 'tuchao';
</script>

页面效果：ui

wKioL1bEMIDT76I9AAAG4wS6txc583.png


实例演示3、经过标签tag修改多个标签的内容

<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
<!-- 经过标签tag获取到标签对象 -->
var name3 = document.getElementsByTagName('div');
<!-- 对该对象进行循环，逐一取出每一个对象进行修改 -->
for (var item in name3){

    name3[item].innerText = 'elephant'
	}
</script>

页面效果：

wKioL1bEMqyi1N_jAAAEH6wzSMg981.png

经常使用函数：

  • 建立标签

       document.createElement('a')

  • 获取或者修改样式

        obj.className

  • 获取或设置属性

        setattribute(key,val)    getattribute(key)

  • 获取或修改样式中的属性

        obj.style.属性

  • 提交表单

        document.geElementById('form_id').submit()


实例演示4、在标签中加入内容

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 建立一个a标签 -->
var tag = document.createElement("a");
<!-- 给建立的标签赋予连接 -->
tag.href = '
 <!-- 给标签设置文本字符 -->
tag.innerText = '点但愿';

var id1 = document.getElementById('n1');
<!-- 给id1对象添加标签 -->
id1.appendChild(tag);

</script>

页面效果：

wKiom1bEOjWxVENhAAAC5BDH8aE193.png


实例演示5、标签替换

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 建立标签对象 -->
var tag = "<a href='http://www.baidu.com'>百度一下</a>"
var id1 = document.getElementById('n1');
<!-- 替换标签 -->
id1.innerHTML = tag;
</script>

页面效果会显示原id="n1"的div标签消失了，替换成了自定义的超连接标签。


实例演示6、修改标签的Class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>js_st1</title>
    <style type="text/css">
    	.hide {display: none;}
    	.n22 {color:red;}

    </style>

</head>
<body>
    <div class="n22" name="n2"> <p>heheheheeeeeee</p></div>
    <hr/>
    <div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
var id2 = document.getElementsByName('n2');
<!-- 将原样式n22替换为hide样式 -->
id2[0].className = 'hide'
</script>      
</body>
</html>

此时第一个div在页面中将不会显示了


实例演示7、修改标签的name值

<div id="n3" name="dog"> </div>

<script type="text/javascript">
<!-- 经过id获取到标签对象 -->
var id3 = document.getElementById('n3');
<!-- 使用log打印原name值 -->
console.log(id3.getAttribute('name'));
<!-- 修改标签的name值为'cow' -->
id3.setAttribute('name','cow');
console.log(id3.getAttribute('name'));
</script>

页面效果：

wKioL1bERcHC_WC5AAAtAWRMTsw355.png


实例演示8、修改标签样式

<div style="width:500px; height:300px; border:solid black 1px" id="n3" name="dog"> </div>

<script type="text/javascript">
var id3 = document.getElementById('n3');
<!-- 获取该标签的宽度 -->
var w = id3.style.width;
console.log(w);
<!-- 修改样式 -->
id3.style.width = '200px'
</script>

页面效果：修改前

wKioL1bESOSRizCOAAAM3SpJY_o215.png

页面效果：修改后

wKioL1bESO-ijmHyAAAEdRqevg8430.png


经常使用事件：

wKiom1bEbrPChngOAAOLKOkh7Gc125.png


实例演示9、建立按钮点击事件

<form id="F1" action='https://www.baidu.com/s?' method="GET">
    <!-- 这里的wd是传给后端程序的value -->
    <input type='text' name='wd' />
  <!-- 定义点击事件，对应Foo()函数 -->  
	<input type='button' value='按钮提交' onclick='Foo();' />

</form>

<script type="text/javascript">
<!-- 定义点击函数内容，提交'F1'对象表单 -->
function Foo (){

	document.getElementById('F1').submit()
}
</script>


经常使用方法：

  • 定义一个函数每隔必定的时间自动执行一次，括号中左边写执行的函数名逗号分割，右边写间隔的时长单位为毫秒。

        setInterval('Foo()',20)

  • 用于中止setInterval的循环执行，这个函数括号中接受的参数为setInterval函数返回的值。

        clearInterval(interval)

  • 定义一个函数间隔必定的时间自动执行，与setInterval函数不一样的是这个方法只让函数执行一次。

        setTimeout('Go()',10000)

  • 用于取消setTimeout函数的执行，函数接受的参数是setTimeout函数返回的值。

        clearTimeout()


搜索框实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>搜索框实例</title>
    <style type="text/css">
    .gray{color: gray;
    	height: 30px;
    	width: 220px;
   }

   .black{
   	color: black;
   	height: 30px;
	width: 220px;
   }

    </style>
</head>
<body>
 
<input type='text' class='gray' id='tip' value='请输入关键词' onfocus='Enter();' onblur='Leave();' />

 <script type="text/javascript">
 	function Enter(){
 		var id = document.getElementById('tip');
 		id.className = 'black'

 		if(id.value=='请输入关键词' || id.value.trim()==''){
 			id.value = ''
 		}
 	}

 	function Leave(){

 		var id = document.getElementById('tip');

 		if(id.value=='请输入关键词' || id.value.trim()==''){
 			
 			id.value='请输入关键词'
 			id.className='gray'

 		}else{
 			id.className='black'
 		}
 	}
 
 </script>
</body>
</html>


×××灯实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>×××灯&nbsp;&nbsp;哈哈和进度条&nbsp;&nbsp;</title>
    <style type="text/css">
    </style>

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

    function Go(){

    <!-- 获取title文本内容 -->
	var content = document.title;
	<!-- 获取内容的第一个字符 -->
	var firstChar = content.charAt(0)
	<!-- 获取title的第二个至最后一个字符 -->
	var sub = content.substring(1,content.length)
	document.title = sub + firstChar;
}

setInterval('Go()',1000);
</script>
</body>
</html>


进度条实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>×××灯&nbsp;&nbsp;哈哈和进度条&nbsp;&nbsp;</title>
    <style type="text/css">
    </style>

</head>
<body>
	<div style="width:1000px;background-color:gray">
		<div id='jindu' style="width:10%;background-color:red;height:20px;"></div>

	</div>

	<div>
		<input type='button' value='点击中止' onclick='Stop();' />
	</div>

<script type="text/javascript">

pro = 10
function Foo(){
	var id = document.getElementById('jindu');
	pro = pro + 1;
	if(pro > 100){
		clearInterval(interval)
	}else{	
		id.style.width = pro+'%';
	}
}
interval = setInterval('Foo()',20)

<!-- 定义中止函数，用于中止进度条 -->
function Stop(){

	clearInterval(interval)
}


</script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程