CodeGym /Java 课程 /模块 3 /使用文档对象模型 (DOM)

使用文档对象模型 (DOM)

模块 3
第 7 级 , 课程 4
可用

5.1 文档.getElementById()

如您所知,创建 JavaScript 是为了向 HTML 页面添加一些动画。到目前为止,我们还没有说太多。如何添加相同的动画?例如,如何改变元素的颜色?

要改变一个元素的颜色,首先需要找到这个元素。为此,document.getElementById();您可以在 HTML 中的id所需元素处编写一个函数,然后从 JavaScript 访问它。例子:


<head>
    <script>
        function changeImage()
        {
           var image = document.getElementById("image123");
            image.src = "new-image.png";
        }
    </script>
</head>
<body>
    <img id="image123" scr="big-image.png" onclick="changeImage()">
</body>

用户点击图片后,函数被调用changeImge()image在其中,我们通过 its获取元素ID,然后将其 src 属性的值更改为一个新值。这将导致元素img加载新图像。

5.2 文档.createElement()

除了获取元素之外,我们还可以创建新元素并删除现有元素。

创建元素非常容易。为此,您需要做两件事:a)创建一个元素,b)将它添加到文档中的正确位置。它通常看起来像这样:


<head>
    <script>
        window.onload = function ()   {
            var image = document.createElement("IMG");
            var image.src = "big-image.png";
            document.body.addAfter(image);
        }
    </script>
</head>
<body>
</body>

5.3 window.navigate() 方法

另一个非常有用的方法是window.navigate(). 使用它,您可以强制浏览器加载新页面而不是当前页面。只需将其传递URL给此方法并调用它即可。例子:


  <body> 
    <img scr="big-image.png" onclick="window.navigate('https://google.com');"> 
  </body> 

在上面的示例中,用户点击图片后,google.com 页面将加载到当前选项卡中。

5.4 当前网址

还有一件有用的事情。有时脚本需要知道当前页面的 URL。例如,可以将相同的脚本添加到不同的页面。怎么做?

为此有一个特殊的属性。document.location.href

var currentURL = document.location.href;
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION