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

湘潭网站制作产品推广案例

wzjs 2025/9/16 19:07:38

湘潭网站制作,产品推广案例,外贸建站及推广,wordpress推荐书籍1.document主要是干什么的文档对象模型（Document Object Model）:在JS中获取html的元素进行修改，新增元素。对于html页面来说它是由html head body div,from等标签组成，在js中将htnl的元素变成document(文档)进行管理&#xff0…

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 //文件修改日期，只读属性