当前位置：首页 > news >正文

JS 中html的document

news 来源：原创 2025/5/22 8:16:43

1.document主要是干什么的

文档对象模型（Document Object Model）:在JS中获取html的元素进行修改，新增元素。

对于html页面来说它是由html head body div,from等标签组成，在js中将htnl的元素变成document(文档)进行管理，以上图来看将document变成根节点，所以通过跟节点document来获取html中标签元素进行管理。

2.具体使用的方法：

HTML部分

1）这个方法就是通过标签的id获取标签

document.getElementById("")

2）通过类名找到 HTML 元素

document.getElementsByClassName("")

通过标签名查找 HTML 元素

var xId=document.getElementById("han-index");
var xTr=xId.getElementsByTagName("td");

<div class="card-body">
	<table class="table table-bordered  table-hover">
	<thead class="thead-light text-center">
	  <tr>
	      <th>流程点</th>
          <th>操作人</th>
	      <th>业务名称</th>
	      <th>结果 <i class="fa fa-sort-amount-asc"></i></th>
          <th>审核意见<i class="fa fa-sort-amount-desc"></i></th>
	      <th>操 作</th>
      </tr>
	</thead>
	<tbody>
		<tr id="han-index">
			<td>G3201900003</td>
			<td title="2077531"><a>名称</a></td>
			<td>操作人</td>
			<td>结果</td>
			<td>审核意见</td>
			<td >
				<p id="showTime"></p>
				<p id="showTime—one"></p>
				<p id="showTime—two"></p>
			</td>
		</tr> 
	</tbody>
	</table>
</div>


<script>
 $(function () {
	document.getElementById("showTime").style.color = "blue"; // 修改文字颜色为蓝色
	//document.getElementById("showTime").id = "newId";
	document.getElementById("showTime—one").innerHTML="<h5 style='color:red'>您好，欢迎访问 我的博客</h5>";
	document.getElementById("showTime—two").innerText="您好，欢迎访问 我的博客";

	var xId=document.getElementById("han-index");
	//alert("xId: "+xId);
	var xTr=xId.getElementsByTagName("td");
	//alert("xTr: "+xTr);

    var x=document.getElementsByClassName("card-body");
 })
</script>

将新的html标签赋值当前标签

3）对于innerHTML 来说可以识别htmL的标签

document.getElementById(id).innerHTML=新的 HTML

4) 对于innerText 只识别文本

document.getElementById(id).innerText = 新的Text

CSS部分

1.document.getElementById(id).style.property=”新样式“;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式</title>
</head>
    <body>
 
        <p id="p1">Hello World!</p>
        <script>
            document.getElementById("p1").style.color="blue";
            document.getElementById("p1").style.fontFamily="Arial";
            document.getElementById("p1").style.fontSize="larger";
        </script>
            <p>以上是CSS样式的调整</p>
 
    </body>
</html>

2.JS对html事件进行反应

1）onclick：οnclick=JS函数。onclick在触发事件。onclick可以在大部分标签中使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="intro" onclick="this.innerHTML='转换！'">你好世界!</p>
大小写字母转换: <input type="text" id="fname" onchange="myFunction()">输入你的名字


</body>

<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</html>

2）onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

3）onchange 事件常结合对输入字段的验证来使用。

常用属性列举

document.title 　　　　　　 //设置文档标题等价于HTML的title标签

document.bgColor 　　　　 //设置页面背景色

document.fgColor 　　　　 //设置前景色(文本颜色)

document.linkColor 　　　 //未点击过的链接颜色

document.alinkColor 　　 //激活链接(焦点在此链接上)的颜色

document.vlinkColor 　　 //已点击过的链接颜色

document.URL 　　　　　 //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性