JS中DOM的操作

最新推荐文章于 2022-11-23 14:27:08 发布

荒野星辰.

最新推荐文章于 2022-11-23 14:27:08 发布

阅读量585

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/gxf206/article/details/126115029

版权

1，DOM介绍

JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM

DOM(Document Object Model)文档对象模型，所谓文档，也就是对网页中的内容、结构和样式进行操作，对象也就是在操作过程中返回值为对象类型，我们学习DOM主要就是对元素进行创建、增、删、改、查、属性操作、时间操作，来看下DOM树吧，最顶层就是Document

2，DOM操作属性

通过我们各种获取元素的方式获取到页面中的标签以后，我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

3.innerHTML

功能

a.获取元素内部的HTML结构

b.设置元素内容

<script type="text/javascript">
		   window.onload = function(){
		    var linkObj = document.getElementById("link");
		    linkObj.href = 'http://www.baidu.com';
		    linkObj.title = 'baidu';
		    linkObj.innerHTML = '百度';
			linkObj.className="link"
		    console.log(linkObj.href,linkObj.title,linkObj.innerHTML);
		   }
		  </script>
	</head>
	<body>
		<a href="http//www.show.com " title="sohu" id="link">搜狐</ a>
	</body>

4. 鼠标经过

 <script type="text/javascript">
		   function change(R) { // onmouseover  鼠标经过
		    var picObj = document.getElementById("pic");
		    if(R=='horse'){
		     picObj.src = 'img/horse.jpg';
		    }else if(R=="dog"){
				picObj.src ="img/dog.jpg"
			}
		     else {
		     	picObj.src ="img/bear.jpg"
		     }
		   }
		  </script>
	</head>
	<body>

5.表单寻址

<script type="text/javascript">
		function show(){
			var answer=document.reg.answer.value;
			var answer=document.forms[0].answer.value;
			var answer=document.getElementsByClassName("input")[3].value;
			console.log(answer);
		}
	</script>

<form name="reg">
					<p>
						<label>用户名:</label>
						<input type="text" name="user"/>
					</p>
					<p>
						<label>密码:</label>
						<input type="password" name="password" />
					</p>
					<p>
						<label>密码问题:</label>
						<input type="text" name="question" />
					</p>
					<p>
						<label>密码答案:</label>
						<input type="text"  name="answer"/>
					</p>
					<p>
						<input type="button" value="提交" onclick="show()"/>
					</p>
				</form>

6.样式属性

element.style 行内样式操作

element.className 类名样式操作

注：1.js里面的样式采取驼峰命名法比如 fontSize，backgroundCoclor

2.修改 style 样式操作，产生的是行内样式， css 权重比较高

7.内部样式

<style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   .pic{
    position: relative;
    width: 400px;
    height: 260px;
    margin: 50px auto 20px auto;
    border: 1px solid #ccc;
   }
   .pic img{
    width: 400px;
    height: 260px;
   }
   .pic .mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 260px;
    background-color: #000;
    opacity: .8;
   }
   .btn{
    width: 400px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #666;
    margin: 0 auto;
    cursor:pointer;
   }
  </style>