JavaScript DOM初理解

最新推荐文章于 2024-07-24 16:20:17 发布

凌水河旁边的令希图书馆

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量21

点赞数

文章标签： 1024程序员节 javascript

本文链接：https://blog.csdn.net/shanxiaxuesheng/article/details/134010153

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Item Listener</title>
</head>

<body>
    <header id="main-header" class="bg-success text-white p-4 mb-3">
        <div class="container">
            <h1 id="header-title">Item Lister</h1>
        </div>
    </header>
    <div class="container">
        <div id="main" class="card card-body"></div>
        <h2 class="title">
            Add Items
        </h2>
        <form class="form-inline mb-3">
            <input type="text" class="form-control mr-2">
            <input type="submit" class="btn btn-dark" value="Sumbit">
        </form>
        <h2 class="title">Items</h2>
        <ul id='items' class="list-group">
            <li class="list-group-item">Items 1</li>
            <li class="list-group-item">Items 2</li>
            <li class="list-group-item">Items 3</li>
            <li class="list-group-item">Items 4</li>
        </ul>
    </div>
</body>

</html>

图1-1 js入口文件 index.js

图1-2 浏览器显示界面

图1.3 DOM树

DOM通过创建表示文档的树，开发者可以随心所欲地控制网页地内容和结构。使用DOM API，可以轻松删除、添加、替换、修改节点。

如何选中DOM中的元素,有四种方法：

1.getElementByID()

2.getElementsByClassName()

3.getElementByTagName()

4.使用css选择器 .quertSelector() .querySelectorAll()

例如：

const btn = document.querySelector('.btn);//选中指定元素
btn.style.background = 'red'; //改变颜色

以上四种方法都可以通过document对象调用

其他操作DOM方法

a. getAttribute() //它只有一个参数---你打算查询的属性的名字；不过该方法不能通过document对象调用，只能通过一个元素节点对象调用它

例如：可以将该方法与getElementByTagName() 方法结合，去查询每个<p>元素的title属性：

let paras = document.getElementsByTag("p");
for(let i = 0;i< paras.length;i++){
   alert(paras[i].getAttribute("title"));
}

b.setAttribute() //类似于getAttribute()方法，该方法也是只能通过一个元素节点对象调用的函数，但setAttribute() 方法需要我们向它传递两个参数

object.setAttribute( attribute,value )

通过setAttribute() 方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码看到的将仍然是原来的属性值---这也就说明，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容，这正是DOM的魅力，不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现对页面内容刷新。

以上就是Js中DOM相关的基础知识。

凌水河旁边的令希图书馆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript DOM初理解

图1-1 js入口文件 index.js图1-2 浏览器显示界面图1.3 DOM树4.使用css选择器 .quertSelector() .querySelectorAll()例如：//选中指定元素//改变颜色以上四种方法都可以通过document对象调用。
复制链接

扫一扫