从零开始JavaScript学习第11天笔记:初识DOM

最新推荐文章于 2024-06-10 22:18:41 发布

骚年的潜力

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量42

点赞数

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/2203_75620248/article/details/132410718

版权

在 JavaScript 中，DOM（Document Object Model）是指表示 HTML 或 XML 文档的对象模型。它提供了一种结构化的方式来访问和操作文档的内容。

DOM 是一个树状结构，由多个节点组成。每个节点代表文档中的一个元素、属性、文本或注释等。

一.获取网页信息

1.document.getElementsByClassName()

document.getElementsByClassName 是一个 DOM 方法，用于根据类名获取文档中的元素节点。它返回一个 HTMLCollection 对象，其中包含具有指定类名的所有元素。


<body>
    <div class="foo">Element 1</div>
    <div class="foo">Element 2</div>
    <div class="bar">Element 3</div>
    <div class="foo bar">Element 4</div>
</body>
<script>
    const elements = document.getElementsByClassName('foo');
    console.log(elements.length); // 输出结果：3
    console.log(elements[0].innerHTML); // 输出结果：Element 1
    console.log(elements[1].innerHTML); // 输出结果：Element 2
    console.log(elements[2].innerHTML); // 输出结果：Element 4
</script>

getElementsByClassName 返回的是一个即时的集合，如果文档中的元素被添加、移除或更改类名，那么集合会立即更新。
返回的 HTMLCollection 对象类似于一个数组，可以使用索引访问其中的元素，也可以使用 length 属性获取集合中的元素数量。
如果没有找到指定类名的元素，则返回一个空的 HTMLCollection 对象，其 length 属性为 0。

2.document.getElementById()

用于根据元素的 id 获取文档中的元素节点。它返回一个元素节点对象，表示具有指定 id 的元素。

<body>
    <div id="myElement">Hello, world!</div>
</body>
<script>
    const element = document.getElementById('myElement');
    console.log(element.innerHTML); // 输出结果：Hello, world!
</script>

getElementById 返回的是一个唯一的元素节点对象，如果找不到具有指定 id 的元素，则返回 null。
通过 id 属性获取元素可以提供快速访问和操作元素的能力。
id 属性在整个文档中应该是唯一的，即不应该有多个元素具有相同的 id。

3.document.getElementsByName()

用于根据元素的 name 属性获取文档中的元素节点。与 getElementById 不同，getElementsByName 返回的是一个元素节点对象的集合，表示所有具有指定 name 的元素。

<body>
    <input type="text" name="username" value="wyc">
    <input type="text" name="username" value="cyj">
</body>
<script>
    const elements = document.getElementsByName('username');
    console.log(elements.length); // 输出结果：2
    console.log(elements[0].value); // 输出第一个输入框的值
    console.log(elements[1].value); // 输出第二个输入框的值
</script>

getElementsByName 返回的是一个 HTMLCollection 对象，类似于一个数组，可以通过索引访问其中的元素。
name 属性可以用于一组具有相同名称的元素，例如一组单选按钮或一组复选框。
getElementsByName 对于其他类型的元素（如 div、p 等）也适用，只要它们具有相同的名称属性。
如果找不到具有指定 name 的元素，则返回一个空的 HTMLCollection 对象，长度为 0。

4.document.getElementsByTagName()

用于根据元素的标签名获取文档中的元素节点。它返回一个 HTMLCollection 对象，表示文档中所有具有指定标签名的元素。

<body>
    <p>喜欢吃</p>
    <p>喜欢叫</p>
</body>
<script>
    const elements = document.getElementsByTagName('p');
    console.log(elements.length); // 输出结果：2
    console.log(elements[0].textContent); // 输出第一个段落的文本内容
    console.log(elements[1].textContent); // 输出第二个段落的文本内容
</script>

tagName 参数应为标签名，不区分大小写。
如果找不到具有指定标签名的元素，则返回一个空的 HTMLCollection 对象，长度为 0。
getElementsByTagName(‘*’) 可以用于获取文档中的所有元素。
getElementsByTagName 返回的是一个 HTMLCollection 对象，类似于一个数组，可以通过索引访问其中的元素。

5. document.querySelector()

document.querySelector 是一个 DOM API 方法，用于通过选择器来选择页面中的第一个匹配元素。它返回一个代表该元素的对象，如果没有找到匹配的元素，则返回 null。

<body>
    <button id="myButton">点击我</button>
</body>
<script>
    // 通过 id 选择按钮元素
    const button = document.querySelector('#myButton');
    // 添加点击事件处理程序
    button.addEventListener('click', function () {
        console.log('喜欢点击');
    });
</script>

请注意，document.querySelector 方法只返回第一个匹配的元素。如果你需要选择所有匹配的元素，可以使用 document.querySelectorAll 方法。

6.document.querySelectorAll()

document.querySelectorAll 是 JavaScript 中的一个方法，它用于选择文档中的多个元素，并返回一个包含这些元素的节点列表。

<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
</body>
<script>
    // 选择所有的段落元素
    const paragraphs = document.querySelectorAll('p');
    // 遍历每个段落元素并修改其文本内容
    paragraphs.forEach(function (paragraph) {
        paragraph.textContent = "Hello World!";
    });
</script>

二.通过文档结构获取元素

1.children

children 是 DOM 元素的一个属性，用于获取该元素的所有子元素节点。它返回一个类似数组的集合，其中包含了该元素的所有子节点。这个集合是一个动态的实时集合，当子元素发生变化时，它会自动更新。

<body>
    <div id="parent">
        <p>第一个子元素</p>
        <p>第二个子元素</p>
        <p>第三个子元素</p>
    </div>
</body>
<script>
    // 获取父元素
    const parent = document.getElementById('parent');
    // 获取父元素的所有子元素
    const children = parent.children;
    // 遍历每个子元素并输出其文本内容
    for (let i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
</script>

2.childNodes

在 JavaScript 中，childNodes 是 DOM 元素的一个属性，用于获取该元素的所有子节点，包括元素节点、文本节点和注释节点等。与 children 属性不同的是，childNodes 属性返回的是一个包含所有子节点的类似数组的集合，包括文本和注释节点等。

<body>
    <div id="parent">
        <p>第一个子元素</p>
        文本节点
        <!-- 注释节点 -->
        <p>第二个子元素</p>
        <p>第三个子元素</p>
    </div>
</body>
<script>
    // 获取父元素
    const parent = document.getElementById('parent');
    // 获取父元素的所有子节点
    const childNodes = parent.childNodes;
    // 遍历每个子节点并输出其类型和内容
    for (let i = 0; i < childNodes.length; i++) {
        const node = childNodes[i];
        console.log(node.nodeType, node.nodeValue);
    }
</script>

3.firstChild

在 JavaScript 中，firstChild 是 DOM 元素的一个属性，用于获取该元素的第一个子节点。与 childNodes 属性返回的是一个包含所有子节点的类似数组的集合不同，firstChild 属性返回的是第一个子节点。

<body>
    <div id="parent">
        <p>第一个子元素</p>
        <p>第二个子元素</p>
        <p>第三个子元素</p>
    </div>
</body>
<script>
    // 获取父元素
    const parent = document.getElementById('parent');
    // 获取父元素的第一个子节点
    const firstChild = parent.firstChild;
    // 输出第一个子节点的类型和内容
    console.log(firstChild.nodeType, firstChild.textContent);
</script>

需要注意的是，firstChild 属性返回的是一个节点对象，即使该节点是一个文本节点或注释节点。如果你只想获取元素节点作为第一个子节点，可以使用 firstElementChild 属性。

4.parentElement

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

<body>
    <div id="parent">
        <div id="child"></div>
    </div>
</body>
<script>
    var childElement = document.getElementById("child");
    var parentElement = childElement.parentElement;
    console.log(parentElement.id); // 输出 "parent"
</script>

一个输入子元素的量，返回数组下标的方法。

 Object.prototype.index = function () {
            var arr = this.parentElement.children
            for (let i = 0; i < arr.length; i++) {
                if (arr[i] === this) { return i }
            }
        }
        let box = document.getElementById("box22")
        let index = box.index()
        console.log(box.parentElement.children[index] === box)

三.Document的属性来直接获取元素

1.document.body

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

<body>
    <h1>Hello, world!</h1>
</body>
<script>
    var bodyElement = document.body;
    console.log(bodyElement); // 输出 <body> 元素对象
    document.body.style.backgroundColor = "red"; // 设置背景颜色为红色
    document.body.innerHTML = "<h1>New content</h1>"; // 替换内容为新的标题
</script>

2.document.forms

用于获取当前文档中的所有元素。

<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <input type="submit" value="Submit">
    </form>
</body>
<script>
    var formElements = document.forms;
    console.log(formElements); // 输出所有的表单元素对象
</script>

3.document.images

用于获取当前文档中的所有 img 元素。

<body>
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</body>
<script>
    var imageElements = document.images;
    console.log(imageElements); // 输出所有的图片元素对象
    var image1 = document.images[0]; // 获取第一个图片元素
    console.log(image1.src); // 获取图片元素的 src 属性值
    image1.alt = "New Alt Text"; // 修改图片元素的 alt 属性值
</script>

4.document.URL

用于获取当前文档的完整 URL 地址。

var currentURL = document.URL;
console.log(currentURL); // 输出 当前地址

5.document.anchors

用于获取文档中带有名称的锚点元素a name=“anchorName” a的集合。

<body>
    <a name="section1">Section 1</a>
    <a name="section2">Section 2</a>
</body>
<script>
    var anchors = document.anchors;
    console.log(anchors.length); // 输出 2
    console.log(anchors[0].name); // 输出 section1
    console.log(anchors[1].name); // 输出 section2
</script>

6.document.links()

用于获取文档中所有带有 href 属性的链接元素（a 标签）的集合。

<body>
    <a href="https://www.example1.com">Link 1</a>
    <a href="https://www.example2.com">Link 2</a>
    <a href="https://www.example3.com">Link 3</a>
</body>
<script>
    var links = document.links;
    console.log(links.length); // 输出 3
    console.log(links[0].href); // 输出 https://www.example1.com
    console.log(links[1].href); // 输出 https://www.example2.com
    console.log(links[2].href); // 输出 https://www.example3.com
</script>

注意，document.links 返回的是一个实时集合，会随着文档的变化而自动更新。

四.视口相关信息(滚动条)

1.scrollTo

用于滚动页面到指定位置的方法。
语法是：window.scrollTo(x, y);
x 是要滚动到的页面水平位置的像素值。
y 是要滚动到的页面垂直位置的像素值。

window.scrollTo(0, 500);

2.scrollBy

scrollBy 方法用于在当前滚动位置的基础上进行相对滚动。它接受两个参数，第一个参数是水平滚动的像素数，第二个参数是垂直滚动的像素数。

<body>
<button onclick="scrollPage()">Scroll Page</button>
</body>
<script>
function scrollPage() {
  window.scrollBy(0, 200); // 向下滚动200像素
}
</script>

在上述代码中，当点击按钮时，scrollPage 函数会被调用。该函数使用 scrollBy 方法将页面垂直向下滚动200个像素。第一个参数为0，表示水平滚动不变。第二个参数为200，表示向下滚动200个像素。
你也可以使用负值来实现相反方向的滚动，例如 scrollBy(0, -200) 表示向上滚动200个像素。

3.scrollIntoView

用于将元素滚动到可见区域内。它是在元素上调用的方法，调用后会将元素滚动到浏览器窗口或者其包含的滚动容器中可见区域内。

<body>
<button onclick="scrollToElement()">Scroll to Element</button>

<div id="myElement" style="height: 500px; overflow: auto;">
  <p>你好啊</p>
</div>
</body>
<script>
function scrollToElement() {
  var element = document.getElementById("myElement");
  element.scrollIntoView(); // 将元素滚动到可见区域
}
</script>

4.innerHeight

innerHeight 是一个只读属性，用于获取浏览器窗口的内部高度，即浏览器窗口可视区域的高度，以像素为单位。

var windowHeight = window.innerHeight;
console.log("浏览器窗口的内部高度：" + windowHeight + "px")

5.innerWidth

innerWidth 是一个只读属性，用于获取浏览器窗口的内部宽度，即浏览器窗口可视区域的宽度，以像素为单位。

var windowWidth = window.innerWidth;
console.log("浏览器窗口的内部宽度：" + windowWidth + "px");

6.clientHeight

clientHeight 是一个只读属性，用于获取元素的内部高度，包括内容的高度和内边距（padding）的高度，但不包括边框（border）和外边距（margin）。

var element = document.getElementById("myElement");
var elementHeight = element.clientHeight;
console.log("元素的内部高度：" + elementHeight + "px");

7.clientWidth

clientWidth 是一个只读属性，用于获取元素的内部宽度，包括内容的宽度和内边距（padding）的宽度，但不包括边框（border）和外边距（margin）。

var element = document.getElementById("myElement");
var elementWidth = element.clientWidth;
console.log("元素的内部宽度：" + elementWidth + "px");

五.元素的几何尺寸和位置

1.offsetParent

offsetParent是一个属性，用于获取一个元素的最近的已定位（positioned）父元素。定位的父元素是指设置了CSS属性position为relative、absolute或fixed的父元素。
offsetParent属性返回一个指向最近的定位父元素的引用，如果不存在定位父元素，则返回null。

<style>
        #container {
            position: relative;
            height: 500px;
            border: 1px solid black;
        }

        #fixedElement {
            position: fixed;
            top: 0;
            background-color: yellow;
            padding: 10px;
        }
    </style>

    <div id="container">
        <div id="fixedElement">
            Fixed Element
        </div>
    </div>

    <script>
        var fixedElement = document.getElementById("fixedElement");
        var offsetParent = fixedElement.offsetParent;
        console.log(offsetParent);//输出null
    </script>

2.offsetTop

offsetTop是JavaScript中一个用于获取元素相对于其offsetParent的上边距（顶部边界）位置的属性。它返回一个元素的整数值，表示元素顶部边界到其offsetParent顶部边界的距离。

  <style>
        #container {
            position: relative;
            height: 500px;
            border: 1px solid black;
        }

        #element {
            position: absolute;
            top: 100px;
            left: 100px;
            background-color: yellow;
            padding: 10px;
        }
    </style>
    <div id="container">
        <div id="element">
            Element
        </div>
    </div>
    <script>
        var element = document.getElementById("element");
        var offsetTop = element.offsetTop;
        console.log(offsetTop);//输出100
    </script>

3.offsetHeight

用于获取元素相对于其边框盒模型的高度的属性。它返回一个元素的整数值，表示元素的高度，包括元素的高度、内边距和边框。

   <style>
     #element {
            height: 200px;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
    <div id="element">
        Element
    </div>
    <script>
        var element = document.getElementById("element");
        var offsetHeight = element.offsetHeight;
        console.log( offsetHeight);//输出241
    </script>
    </script>

4.js中clientHeight

用于获取元素的可见高度，即元素的内容区域的高度，不包括元素的边框（border）、内边距（padding）和滚动条（scrollbar）。

 <style>
        #element {
            height: 200px;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
    <div id="element">
        Element
    </div>
    <script>
        var element = document.getElementById("element");
        var height = element.clientHeight;
        console.log(height);//输出240
    </script>
    </script>

5.clientTop

用于获取元素的上边框（border）的宽度。
这个宽度值包括上边框的宽度，但不包括内边距（padding）和滚动条（scrollbar）。

 <style>
        #element {
            height: 200px;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
    <div id="element">
        Element
    </div>
    <script>
        var element = document.getElementById("element");
        var topBorderWidth = element.clientTop;
        console.log(topBorderWidth);//输出1
    </script>

6.scrollTop

用于获取或设置一个元素的垂直滚动的像素值。
scrollTop属性用于获取或设置一个元素的垂直滚动的像素值。当一个元素具有滚动条，并且滚动条向下滚动时，scrollTop返回滚动条滚动的距离（以像素为单位）。当滚动条滚动到顶部时scrollTop为0。
要使用scrollTop属性，首先需要获取一个元素的引用，可以使用document.getElementById()等方法来获取元素的引用，然后通过元素的scrollTop属性来获取或设置垂直滚动的像素值。

 <style>
        #element {
            height: 200px;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
    <div id="element">
        Element
    </div>
    <script>
        var element = document.getElementById("element");
        var scrollTopValue = element.scrollTop;
        console.log(scrollTopValue);//输出0
    </script>
    </script>

我这个没有滚动条自然也就是0

骚年的潜力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
从零开始JavaScript学习第11天笔记:初识DOM

在 JavaScript 中，DOM（Document Object Model）是指表示 HTML 或 XML 文档的对象模型。它提供了一种结构化的方式来访问和操作文档的内容。DOM 是一个树状结构，由多个节点组成。每个节点代表文档中的一个元素、属性、文本或注释等。
复制链接

扫一扫