前端DOM的一些document基本操作

最新推荐文章于 2022-09-01 13:54:43 发布

qq_31850627

最新推荐文章于 2022-09-01 13:54:43 发布

阅读量302

点赞数

文章标签： html dom操作

本文链接：https://blog.csdn.net/qq_31850627/article/details/115394576

版权

在**《script》《/script》当中创建方法function（）时
function获取当前页面数据可以使用document.getElementById(**)来根据Id来获取对应的元素

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" href="http://www.w3school.com.cn/">W3School</a></p>

<p>单击按钮以显示上面链接的 href 属性的值。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myAnchor").href;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

在这里插入图片描述
还可以直接对页面当中的元素设置快捷键，例如说设置焦点，在经常使用的链接，按钮，输入栏当中都可以为他们设置一个焦点和快捷键，这样在多次使用的时候可以加快工作效率。

<html>
<head>
<script type="text/javascript">
function accesskey()
{
document.getElementById('w3').accessKey="w"
document.getElementById('qwfButton').accessKey="t"
document.getElementById("qwf").accessKey="r"
}
</script>
</head>

<body onload="accesskey()">

<p><a id="w3" href="http://www.w3school.com.cn/">W3School.com.cn</a> （请使用 Alt + w 给该链接赋予焦点）</p>
<p><input type="button" id="qwfButton" value="测试button">（请使用 Alt + t 为该链接赋予焦点）</p>
<p><input type="text" id="qwf" value="qwf"></a> （请使用 Alt + r 为该链接赋予焦点）</p>

</body>
</html>

在这里插入图片描述

可以直接在script当中使用document.write（）,而且write当中也可以使用其他文本标签

<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

</body>
</html>

在这里插入图片描述

功能	代码
标题（title）	document.title
URL	document.URL
referrer（referrer 属性返回加载本文档的文档的 URL）	document.referrer
服务器域名	document.domain
输入框当中的文字	document.getElementById(“ElementId”).value

qq_31850627

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端DOM的一些document基本操作

在**《script》《/script》当中创建方法function（）时function获取当前页面数据可以使用document.getElementById(**)来根据Id来获取对应的元素<!DOCTYPE html><html><body><p><a id="myAnchor" href="http://www.w3school.com.cn/">W3School</a></p><p>单击
复制链接

扫一扫