Javascript--DOM文档对象模型

HTML DOM

DOM全称是Document Object Model，译为文档对象模型

dom操作，是对html进行访问和操作

操作页面中的标签: 标签,属性,内容

操作: CURD 增删改查

在 HTML DOM 中，所有事物都是节点

节点：dom树中每一项都是一个节点

	节点名称	节点值	节点类型
元素节点	大写的标签名	null	1
文本节点	#text	内容本身	3
属性节点	属性名	属性值	2

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

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

<body>
    <a href="#" class="box" name="box" id="box">hello world</a>
</body>

</html>
<script>
    var aBox = document.querySelector('#box');// 获取节点对象
    // 元素节点
    console.log(aBox.nodeName); // A      // 获取节点名称（大写的标签名）
    console.log(aBox.nodeValue); // null  // 获取节点值(在这里,元素本身作为一个节点没有值)
    console.log(aBox.nodeType);  // 1     // 获取节点类型（1，2，3）

    // 文本节点
    // 在这里,firstChild--返回被选节点的第一个子节点
    console.log(aBox.firstChild.nodeName);  // #text
    console.log(aBox.firstChild.nodeValue); // hello
    console.log(aBox.firstChild.nodeType);  // 3

    // 属性节点
    // 在这里,getAttributeNode--从当前元素中通过属性名获取属性节点
    console.log(aBox.getAttributeNode('href').nodeName);  // href
    console.log(aBox.getAttributeNode('href').nodeValue); // #
    console.log(aBox.getAttributeNode('href').nodeType);  // 2
    // obj.getAttributeNode(“href”);  从当前元素中通过名称获取属性节点
</script>

获取元素节点------------------------------------------------------------

1. 使用id获取

由于id的唯一性，所以只有一个元素，如果body中有多个id，则会返回第一个

let oDiv = document.getElementById('box');

2. 使用class获取 (不管有几个相同的class名，获取到的都是数组)

注意这里：Elements

let oDiv = document.getElementsByClassName('box');

如果想获得单一的元素，可在后面加[0]

3. 使用name获取【返回结果以数组】

let oDiv = document.getElementsByName('box');

4. 使用标签名【返回结果以数组】

let oDiv = document.getElementsByTagName('div');

5. 获取单个元素 querySelector('选择器') 【如果有多个相同的，获取的是第一个】

let oDiv = document.querySelector('.box');

6. 获取多个元素【返回结果以数组】

注意这里：All

如果想获得单一的元素，可在后面加[0]

let oDiv = document.querySelectorAll('.box');

let oDiv = document.querySelectorAll('.box')[0];

7. 间接获取

let oDiv = document.getElementById('box');

let p = oDiv.getElementsByTagName('p');

console.log(p)【其意为获取id为box元素下面的子元素<p></p>数组】

8. 后代选择器,相邻兄弟,子元素选择器

【使用document.querySelector可以全面的获取HTML文档的所有元素，""里的内容与css选择器相同】

let oDiv = document.querySelector('#box>p');

let oDiv = document.querySelector('.box>p');

let oDiv = document.querySelector('.box p');

获取节点-----------------------------------------------------

element.childNodes 获取元素/节点的节点列表，包括文本节点、注释节点

element.children 获取元素/节点的节点列表，只有元素节点

element.classList 获取元素的类名列表，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="box" class="box1 box2 box3 box4 box5">
    </div>
</body>
<script>
/* 1 */    console.log(box.classList);    // 获取id为box标签的class列表
            box.classList.add("box6","box7")    // 向class列表中添加"box6","box7"两个类名
/* 2 */    console.log(box.classList);    // 再次输出，可以明确看到多了两个类名
/* 3 */    console.log(box.classList.length);    // 获取类名的长度 输出：7
/* 4 */    console.log(box.classList.contains("box3"));    // 在class列表中查询是否有"box3"这个类名，有则返回true，无则false
/* 5 */    console.log(box.classList.item(1));    // 获取class列表中下标为 1 的类名
            box.classList.remove("box6","box4")    // 删除在class列表中类名为"box6","box4"类名
/* 6 */    console.log(box.classList);    // 再次输出class列表
</script>
</html>

element.className 获取或设置class类名

element.className=newClassName

element.style 获取或设置元素的样式属性

element.attributes 获取指定节点属性列表

element.parentNode 获取指定元素的父节点

element.firstElementChild 获取指定元素的第一个子元素

element.firstChild 获取指定元素的第一个子节点

element.getAttribute(属性名) 通过属性名获取属性值

element.getAttributeNode(属性名) 通过属性名获取属性节点

element.lastChild 获取最后一个子节点，包含文本节点和注释节点（取决哪个在最后）

element.lastElementChild 获取最后一个子节点（忽略文本节点和注释节点）

element.previousSibling 获取指定元素的前一个兄弟元素（处在同一层）（包括文本节点、注释节点）

element.previousElementSibling 获取元素节点之前的兄弟元素节点（不包括文本节点、注释节点）

element.tagName 获取元素的标签名（大写的标签名）

element.textContent 获取仅获取元素的文本内容，设置元素即覆盖元素的全部内容

<html>
<body>
    <div id="box1">hello world</div>
    <div id="box2">
        hello world
    </div>
</body>
<script>
    console.log("111",box1.textContent);
    console.log("111",box2.textContent);
    box1.textContent = "你好呀"    // 这里将box1中的"hello world"替换为"你好呀"
    box2.textContent = "你好呀"    // 设置即覆盖掉id为box2标签，替换为指定内容
    console.log("222",box1.textContent);
</script>
</html>

element.title element.title = newTitle 获取和设置元素的标题

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dsadasdasd</title>
</head>
<body>
    <div>...</div>
</body>
<script>
    console.log(document.title); // 输出：dsadasdasd
</script>
</html>

修改节点-----------------------------------------------------

element.setAttribute(属性名,属性值) 创建或改变某个新属性

element.setAttributeNode(属性节点) 用于添加新的属性节点

element.removeAttribute(属性名称) 从元素中删除指定的属性

element.removeAttributeNode(属性名称) 从元素中删除指定的属性节点

element.removeChild() 删除一个子元素

    // 获取一个类名为box的标签
    let eleBox = document.querySelector(".box");
    // 删除子节点，childNodes--可返回元素的节点列表，删除eleBox元素中，节点列表下标为1的节点
    eleBox.removeChild(eleBox.childNodes[1]);

element.appendChild(newNode) 向元素的子节点列表末尾添加一个新的元素/节点

element.insertBefore(newNode,oldNode) 向元素的子节点列表oldNode节点前面添加一个新的元素/节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dsadasdasd</title>
</head>
<body>
    <div id="box" class="box1 box2 box3 box4 box5">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
</body>
<script>
    let box = document.getElementById("box");
    let boxP = box.getElementsByTagName("p")[1]
    console.log(boxP);
    box.className = "newBox";
    console.log(box.classList);
    let newNode = document.createElement("p");
    newNode.innerText = 0
    box.insertBefore(newNode,boxP)
</script>
</html>

其他获取节点方式-----------------------------------------------------

修改现有样式表

document.styleSheets[0].insertRule(".box{font-size:26px;line-height:50px;width:200px;height:50px}")

posted @ 2025-08-18 17:41 五季-子琛阅读(3) 评论(1) 收藏举报

刷新页面返回顶部

izichen

Javascript--DOM文档对象模型

公告