getdocument详解

发布时间：2023-05-19

一. getdocumentid

getdocumentid 用于通过 id 属性获取 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<script>
function getdocumentid() {
    var element = document.getElementById("example");
    element.style.color = "red";
}
</script>
</head>
<body>
<p id="example">Hello World!</p>
<button onclick="getdocumentid()">Click me</button>
</body>
</html>

以上示例中，定义了一个 getdocumentid 函数，在点击按钮时该函数会获取 id 为 example 的元素，并将其字体颜色改为红色。

二. getdocument函数

getdocument 函数用于通过选择器获取 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<script>
function getdocument() {
    var element = document.querySelector(".example");
    element.style.color = "blue";
}
</script>
</head>
<body>
<p class="example">Hello World!</p>
<button onclick="getdocument()">Click me</button>
</body>
</html>

以上示例中，定义了一个 getdocument 函数，在点击按钮时该函数会获取 class 为 example 的元素，并将其字体颜色改为蓝色。

三. getdocumentbyunid

getdocumentbyunid 用于通过唯一标识符（unid）获取 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<script>
function getdocumentbyunid() {
    var element = document.getElementsByName("example")[0];
    element.style.color = "green";
}
</script>
</head>
<body>
<p name="example">Hello World!</p>
<button onclick="getdocumentbyunid()">Click me</button>
</body>
</html>

以上示例中，定义了一个 getdocumentbyunid 函数，在点击按钮时该函数会获取 name 为 example 的元素，并将其字体颜色改为绿色。

四. getdocumentbyclass

getdocumentbyclass 用于通过 class 属性获取 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<script>
function getdocumentbyclass() {
    var elements = document.getElementsByClassName("example");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.color = "purple";
    }
}
</script>
</head>
<body>
<p class="example">Hello World!</p>
<p class="example">Hello World!</p>
<p class="example">Hello World!</p>
<button onclick="getdocumentbyclass()">Click me</button>
</body>
</html>

以上示例中，定义了一个 getdocumentbyclass 函数，在点击按钮时该函数会获取所有 class 为 example 的元素，并将它们的字体颜色改为紫色。

五. getdocumentelement结果为null

getdocumentelement 用于获取当前元素的父元素。

<!DOCTYPE html>
<html>
<head>
<script>
function getdocumentelement() {
    var element = document.getElementById("example");
    var parent = element.parentElement;
    if (parent != null) {
        parent.style.color = "orange";
    }
}
</script>
</head>
<body>
<div>
<p id="example">Hello World!</p>
</div>
<button onclick="getdocumentelement()">Click me</button>
</body>
</html>

以上示例中，定义了一个 getdocumentelement 函数，在点击按钮时该函数会获取 id 为 example 的元素的父元素，并将其字体颜色改为橙色。但是，由于该元素没有父元素，因此可能会返回 null 值。

六. getdocumentbyid vue

getdocumentbyid 用于通过 id 属性获取 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
function getdocumentbyid() {
    var element = document.getElementById("example");
    element.style.color = "red";
}
</script>
</head>
<body>
<div id="app">
<p id="example">Hello World!</p>
<button @click="getdocumentbyid">Click me</button>
</div>
</body>
</html>
<script>
var app = new Vue({
    el: '#app',
    methods: {
        getdocumentbyid: getdocumentbyid
    }
})
</script>

以上示例中，定义了一个 getdocumentbyid 函数，在点击按钮时该函数会获取 id 为 example 的元素，并将其字体颜色改为红色。该示例使用了 Vue 框架，将其与方法 getdocumentbyid 绑定到按钮上，在点击按钮时触发方法事件。

七. getdocumentbyid

getdocumentbyid 用于通过 id 属性获取 HTML 元素。

<!DOCTYPE html>
<html>
<head>
<script>
function getdocumentbyid() {
    var element = document.getElementById("example");
    element.style.color = "red";
}
</script>
</head>
<body>
<p id="example">Hello World!</p>
<button onclick="getdocumentbyid()">Click me</button>
</body>
</html>

以上示例中，定义了一个 getdocumentbyid 函数，在点击按钮时该函数会获取 id 为 example 的元素，并将其字体颜色改为红色。

八. getdocumentbase

getdocumentbase 用于获取当前文档的 base 元素。

<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/path/" target="_blank">
</head>
<body>
<script>
var base = document.baseURI;
document.write(base);
</script>
</body>
</html>

以上示例中，获取了文档中的 base 元素并输出了其 href 属性。baseURI 属性返回当前文档的 URI。

推荐文章