JavaScript，通过DOM操作元素内容

最新推荐文章于 2023-09-16 21:46:01 发布

永远少年@

最新推荐文章于 2023-09-16 21:46:01 发布

阅读量265

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/LovelyHeart/article/details/126591615

版权

JavaScript，通过DOM操作元素内容

DOM介绍：

文档对象模型（document object model），其作用是规定了JS操作网页的规范。

节点（node）

DOM中规定，HTML网页中所有的一切内容都可以看作是一个节点对象，节点对象的类型有：

①document:文档节点,是整个文档的根节点,可以称为document对象

②element node:元素节点,网页中所有的标签(div/a/img等)

③text node:文本节点,网页中所有的文本内容

④attribute node:属性节点,网页中元素的所有属性(class=“box” / href=“#”)

⑤document type:文档类型声明节点()

⑥document fragment:文档片段节点(一段代码)

⑦comment:注释节点,网页中所有的注释

节点树（DOM Tree）

整个文档所有的节点，按照所在的层级，都可以抽象成为一种树状结构上的节点，这种树状结构成为节点树（DOM Tree），document节点是文档的根节点，document节点下包含两个节点：documentType和html两个元素节点。属性节点和元素节点属于兄弟关系。document节点可以直接使用。

1.获取元素节点

1.1利用get方法获取元素节点

①利用id获取

document.getElementById(‘idName’);

1)必须定义在document节点上

2)返回第一个满足条件的【元素节点】

3)ID区分大小写

4)如果获取不到,返回null

②利用标签名获取

node.getElementsByTagName(‘标签名’);

1)node可以是document节点和元素节点

2)标签名不区分大小写

3)返回HTMLCollection:html元素集合,【类数组对象】

4)通过下标获取类数组中的元素节点

③利用类名获取

document.getElementsByClassName(‘类名’);

1)返回类数组对象

2)类名区分大小写

④利用name属性获取(较少使用)

document.getElementsByName(‘名称’);

1)返回类数组对象

2)name的名称区分大小写

1.2利用query方法（css选择器）获取元素节点

①querySelector(‘选择器’)

document.querySelector(‘css选择器’)

返回第一个符合条件的元素节点

②querySelectorAll(‘选择器’)

document.querySelectorAll(‘css选择器’)

返回所有满足条件的元素节点组成的类数组对象

2.创建、添加节点对象

2.1创建元素节点

document.createElement(‘标签名’)

2.2创建文本节点（了解）

document.createTextNode(‘文本’)

2.3创建属性节点（了解）

document.createAttribute(‘属性名’)

2.4添加节点对象

2.4.1.将一个节点作为子节点添加到父元素节点下（元素节点、文本节点）

父元素.appendChild(子节点)；

2.4.2.属性节点的添加，属性节点为为元素节点的兄弟节点

let attr = document.createAttribute('属性名');  //创建属性节点
attr.value = '属性值';	//给属性节点赋值
元素节点.setAttributeNode(元素节点); //将属性节点设置到相应的元素节点上

2.5例子

// js创建节点对象
// 1. 创建元素节点
let h1 = document.createElement('h1');

// 2. 创建文本节点
let text = document.createTextNode('下课吧，吃饭啦！！');

// 3. 把文本节点添加到元素节点中(文本节点是元素节点的子节点)
// 父节点.appendChild(子节点)：把子节点作为最后一个子节点添加到父节点中
h1.appendChild(text);

// 4. 创建属性节点
let attr = document.createAttribute('align');

// 5. 给属性节点赋值
attr.value = "center";

// 6. 设置属性节点  元素节点.setAttributeNode(属性节点)
h1.setAttributeNode(attr);

// 7. 把元素节点添加到页面中
// 把h1作为body的子节点追加到页面中
document.getElementById('body').appendChild(h1);

3.操作元素节点的内容

3.1.JS操作css样式

3.1.1.通过setAttribute()

元素节点.setAttribute(“style”,“属性值”)

li.setAttribute('style','float:left;');//给li元素设置属性（设置的属性为行内样式）

4.1.2 通过className

元素节点.className=“类名”

<style>
    .curcer{
        background-color:#fff;
    }
</style>
<script>
    let div = document.querySelector('div');//获取div元素节点
	div.className = 'curcer';//设置div元素节点的类名为curcer
</script>

4.1.3.通过style属性操作【行内样式】

①元素节点.style.属性 = “属性值”;

适用于少量样式

注意： ①当属性包含-时，需要修改小驼峰命名法

②当属性是js的关键字，需要写成cssFloat

③属性值是字符串形式，必须加单位

// 设置行内样式
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "pink";

// 获取行内样式
div.style.width

//删除行内样式
div.style.width = '';

②元素节点.style.cssText=“属性:属性值;属性:属性值;”

适用于多个样式

// 设置行内样式
div.style.cssText = `width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
float:left;
`;

// 获取所有行内样式
div.style.cssText

// 清空所有行内样式
div.style.cssText = '';

③元素节点.style.方法()

元素节点.style.getProppertyValue(“属性名”)：获取行内样式

元素节点.style.setPropperty(‘属性名’,‘属性值’,!important)：设置行内样式

元素节点.style.removePropperty(“属性名”)：删除行内样式

3.1.5 获取最终样式

1） window.getComputedStyle(元素节点)

返回元素的所有样式(包含默认样式)组成的对象，可以通过点或者[]获取属性

2）IE低版本

元素节点.currentStyle

不支持currentStyle属性的浏览器返回undefined

3）兼容性写法

// 思路：支持currentStyle，就通过currentStyle属性获取样式，不支持，就通过window.getComputedStyle方法获取样式
function getStyle(*element*) {
// 方法1
/* if (element.currentStyle) {//返回对象，隐式转换为true
// IE低版本
	return element.currentStyle
} else {//返回undefined，隐式转换为false
	return window.getComputedStyle(element)
} */

// 方法2
// return element.currentStyle ? element.currentStyle : window.getComputedStyle(element);

 // 方法3
 return *element*.currentStyle || window.getComputedStyle(*element*)
 }