DOM文档操作（个人笔记）

最新推荐文章于 2024-10-18 17:51:23 发布

bug_er

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量100

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_51443542/article/details/123876778

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 查找元素

1.1 方法介绍

具体方法	描述
document.getElementById("id")	通过元素id查找元素
document.getElementsByClassName("class")	通过类名查找元素
document.getElementsByTagName("TagName")	通过标签名查找元素
document.querySelector("CSS选择器")	通过CSS选择器选择元素
document.querySelectorAll("CSS选择器")	通过CSS选择器选择所有元素

1.2 使用样例

<button id="btn">我是按钮</button>

<script>
    var btn = document.getElementById("btn");
    console.log(btn);
</script>

2. 获取值

2.1 方法介绍

设有一个元素节点Node：

具体方法	介绍
Node.innerText	获取Node节点中的Text内容
Node.innerHTML	获取Node节点里面的HTML代码
Node.属性名	获取Node节点的属性值：Node.style
Node.style.属性值	获取Node节点的行内样式的值
Node.getAttribute(attribute)	获取HTML属性值

2.2 方法演示

<div id="box">
    <h1>我是Box中的大标题</h1>
</div>

<script>
    var box = document.getElementById("box");
    console.log(box.innerHTML);
</script>

3. 修改值

3.1 方法介绍

设有元素节点Node:

具体方法	描述
Node.innerText = new text content	改变Node节点里面的Text值
Node.innerHTML = new html content	改变HTML里面的代码
Node.属性 = value	设置Node的新属性值
Node.SetAttribute(attribute,value)	改变属性值
Node.属性.样式 = new ...	设置样式

3.2 方法样例

<button id="btn">我是按钮</button>

<script>
    var btn = document.getElementById("btn");
    btn.innerText = "我是JavaScript的按钮";
    console.log(btn);
</script>

4 . 修改HTML的值

4.1 方法介绍

具体方法	描述
document.createElement(element)	创建 HTML 属性节点。
document.createTextNode(text)	创建 HTML 文本节点。
元素节点.removeChild(element)	删除 HTML 元素。
元素节点.appendChild(element)	添加 HTML 元素。
元素节点.replaceChild(element)	替换 HTML 元素。
元素节点.insertBefore(element)	在指定的子节点前面插入新的子节点。

4.2 方法样例

<body>

<script>
    var ul = document.createElement("ul");

    var li1 = document.createElement("li");
    var text1 = document.createTextNode("列表项1");
    li1.appendChild(text1);
    ul.appendChild(li1);

    var li2 = document.createElement("li");
    var text2 = document.createTextNode("列表项2");
    li2.appendChild(text2);
    ul.appendChild(li2);

    var li3 = document.createElement("li");
    var text3 = document.createTextNode("列表项3");
    li3.appendChild(text3);
    ul.appendChild(li3);

    var li4 = document.createElement("li");
    var text4 = document.createTextNode("列表项4");
    li4.appendChild(text4);
    ul.appendChild(li4);

    document.getElementsByTagName("body")[0].appendChild(ul);
</script>