day08-dom节点

最新推荐文章于 2024-07-12 16:31:27 发布

xingnan.

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量121

点赞数

分类专栏：前端笔记文章标签： html5 css javascript jquery ajax

本文链接：https://blog.csdn.net/qq_39035580/article/details/118810856

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、什么是dom？

1.文档对象的模型

dom描绘的是一个层级的节点树，运用方法对节点进行增删改查操作

Dom中的三个字母分别表是什么？

D(文档)：可以理解为整个web加载的网页文档
O(对象)：可以理解为window的东西
m（模型）：网页文档的树形结构

2.节点：

加载html页面的时候，web浏览器生成一个树形的结构，用来描述页面的内部结构，dom这种树形结构由节点组成

Html标签为最大的根标签（最大的根节点）

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有能力：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

3.节点的种类

元素节点（把标签我们一般称为元素）

属性节点

文本节点

二、查找节点

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

2.1、getElementById()方法

参数：id的值

如果找到相应的元素则返回该元素的对象，如果不存在的返回null

<div id="box"></div>
var box = document.getElementById("box")

2.2、getElementsByTagName()

这个方法将返回的是一个数组（类数组）对象，这个数组保存具有相同元素名的节点列表

<ul id="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var li_ = document.getElementsByTagName('li')
//
var box = document.getElementById("box")
var li_ = box.getElementsByTagName('li')

2.3、getElementsByClassName()

这个方法将返回的是一个数组（类数组）对象，这个数组保存具有相同类名的节点列表

<ul id="box">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>

var item = document.getElementsByClassName('item')

2.4、通过 CSS 选择器查找 HTML 元素

querySelectorAll() 方法

<p class="intro">选我</p>
<p>选我2</p>
<p>选我3</p>
<p>选我4</p>

var intro = document.querySelectorAll("p")；//获取所有p标签

querySelector() 方法

        <ul>
            <li class="line"><p>1</p></li>
            <li class="line">2</li>
            <li class="line">3</li>
            <li class="line">4</li>
            <li class="line">5</li>
        </ul>

var line = document.querySelector('.line'); //line为第一个类名为line的元素

三、改变 HTML 内容

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.属性= new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

3.1、innerHTML

修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。

<!DOCTYPE html>
<html>
<body>
    <h2>JavaScript 可以更改 HTML</h2>
    <p id="p1">Hello World!</p>
<script>
    document.getElementById("p1").innerHTML = "Hello Kitty！";
</script>
</body>
</html>

innerText 输出文本不会解析标签

3.2、改变属性的值

document.getElementById(id).attribute = new value
例如：

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="图片1路径">
<script>
document.getElementById("myImage").src = "图片2路径";
</script>
</body>
</html>

3.3、改变 HTML 样式

document.getElementById(id).style.property = new style

<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>
</body>
</html>

css属性使用驼峰式写法

四、获取节点属性

1. getAttribute()方法

这个方法将获取某个元素的值，它和直接使用属性获取属性值有一定的区别

 Document.getElementById(“box”).id

如果自定的属性，它无法获取

 Document.getElementById(“box”).getAttribute(“class”)

自定义的属性，getAttribute可以获取

 Document.getElementById(“box”).getAttribute(“class”)；//ie7以下不支持

2. setAttribute()方法

这个方法将设置元素中某个属性和值，它有两个参数：属性名和值。

如果属性本身已经存在,那么它就会覆盖

在ie7以下版本，使用它设置class和style属性是没有效果的，ie8解决了这个问题，但还是不建议使用

3.removeAttribute()

这个方法可以移除html的属性

img_.removeAttribute('src')

Ie6不支持这个方法

xingnan.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day08-dom节点

目录一、什么是dom？二、查找节点查找 HTML 元素三、改变 HTML 内容四、获取节点属性一、什么是dom？1.文档对象的模型dom描绘的是一个层级的节点树，运用方法对节点进行增删改查操作Dom中的三个字母分别表是什么？ D(文档)：可以理解为整个web加载的网页文档 O(对象)：可以理解为window的东西 m（模型）：网页文档的树形结构 2.节点：加载html页面的时候，web浏览器生成一个树形的结构，用来描述页面的内部结构，
复制链接

扫一扫