JavaScript_DOM

最新推荐文章于 2023-10-20 13:40:30 发布

原创最新推荐文章于 2023-10-20 13:40:30 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

为什么要复制我的代码? 难道我写的太好了?

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了JavaScript中的DOM（文档对象模型），包括如何根据ID、class、标签名获取元素，以及DOM属性的读写，如innerText、innerHTML、style、className、id。此外，还讲解了DOM节点的分类、类型判断、关系节点的获取，以及如何进行DOM元素的操作。

DOM

DOM: document object model 文档对象模型,主要提供一些操作文档的属性和方法
操作元素节点的属性和方法

获取元素的方法:

根据id名来获取元素
document.getElementById(‘id名’)
返回值:获取的元素
根据class名来获取 document.getElementsByClassName(‘class名’)
返回值:是一个伪数组,需要通过索引的形式获取里面的元素
根据标签名来获取 document.getElementsByTagName(‘标签名’)
返回值:是一个伪数组,需要通过索引的形式获取里面的元素
使用这种方法获取元素的集合,不可以使用forEach的方法
document.querySelector(’ .class名 || #id名 || 标签名 || 选择器(.box span) ')
返回值:获取的是第一个满足条件的元素
document.querySelectorAll(’ .class名 || #id名 || 标签名 || 选择器(.box span) ')
返回值: 以伪数组的形式返回所有满足的元素
使用这种方法获取元素的集合,是可以使用forEach的方法
document.getElementsByName(‘标签XXX属性中的属性值’): 根据标签XXX属性的属性值来获取元素
返回值: 返回一个节点集合

	<input type="text" name="user">
    <input type="text" name="user">
    var user = document.getElementsByName("user");
    console.log(user);
    // NodeList(2)

操作元素的属性:

innerText : 只获取文本内容 , 设置的时候内容有标签的时候,也不会当成标签去解析,直接当成内容显示
innerHTML : 获取标签的所有内容(包括子标签),设置的时候有标签也会当初标签解析
style : 获取或者设置元素的样式,只能获取行内样式
className : 获取或者设置元素的class名,覆盖式的设置
id : 获取或者设置元素的id名

		var txt = div.innerText;
        console.log(txt);
        // 获取div下的文本内容

        var html = div.innerHTML;
        console.log(html);
        // 获取div下的所有内容

        div.innerText = '<p>js设置上去的内容</p>'
        // <p>js设置上去的内容</p>
        div.innerHTML = '<p>js设置上去的内容</p>';
        // js设置上去的内容

		div.style.width = "200px";
        var w = div.style.width;
        var h = div.style.height;
        console.log(h);

元素的属性

1.dom属性：通过console.dir() 查看dom对象,在dom对象中存在的属性称为dom属性,就是可以通过、 . 的形式获取或者设置这个属性的值
2. 标签属性,直接存在标签上的属性
获取或者设置标签中的属性:
[1]. 获取属性的属性值: getAttribute(‘属性名’)
[2]. 设置标签属性: setAttribute(‘属性’,‘属性名’)
[3]. 删除标签属性:removeAttribute(‘属性’)

dom中节点的分类

节点分类:

元素节点
文档(文本)节点 : 包括空格、换行
注释节点
属性节点

判断节点的类型: nodeType
当使用nodeType去判断节点类型的时候
[1]返回值为1的时候表示是元素节点
[2]返回值为2的时候表示是属性节点
[3]返回值为3的时候表示是文本节点
[4]返回值为8的时候表示是注释节点

		<div class="box" id="div" index="1">
        	我是
        	<span>span元素</span>
        	<!-- 我是div中的注释 -->
    	</div>

		var div = document.querySelector('div');
        //不能获取属性节点
        var childNode = div.childNodes;
        console.log(childNode);
        // NodeList(5)
		// 0: text
		// 1: span
		// 2: text
		// 3: comment
		// 4: text
        console.log(childNode[1].nodeType);
        // 1

		console.log(div.attributes);
		//获取属性节点,以伪数组的集合返回
		//length属性:属性节点的个数

关系节点的获取

关系节点的获取：
【1】根据父元素，去获取子元素
【2】根据子元素，去获取父元素
【3】根据兄弟元素获取兄弟元素

是

【1】childNodes 获取元素下所有的子节点(包括元素、文本和注释节点)
【2】firstChild 获取元素的第一个子节点（包括元素、文本和注释节点）
【3】lastChild 获取最后一个子节点（包括元素、文本和注释节点）
【4】children 获取元素下所有的元素节点
【5】firstElementChild 获取第一个元素节点
【6】lastElementChild 获取最后一个元素节点
【7】parentElement 通过子元素获取父元素（只能获取到上一级的父元素）
【8】parentNode 获取父节点
【9】previousSibling 获取元素的上一个兄弟节点（包括元素、文本、注释节点）
【10】previousElementSibling 获取上一个元素的节点
【11】nextSibling 获取下一个兄弟节点
【12】nextElementSibling 获取下一个元素的兄弟节点

操作dom元素

操作dom元素其实就是对dom元素的增删查改

查:
	获取元素

增：
增加一个元素
	[1]:创建元素	document.createElement()
	[2]:在创建的这个元素写入页面中已经存在的一个元素
 		父元素.appendChild(子元素) 把这个子元素追加到父元素中(成为父元素中的最后一个子元素)
 		父元素.insertBefore(创建的元素a,页面中存在的元素b)
 		把a元素放在b元素的前面

删:
删除某个已经存在的元素
	父元素.removeChild(子元素) 把父元素中的这个子元素删除
	元素.remove()把当前这个元素删除

改:
替换元素
replaceChild(a,b) 用a元素替换b元素

克隆元素:cloneNode()
	当这个函数没有参数的时候,只能克隆元素,不会克隆元素的内容
	如果要克隆元素内容,需要传递一个参数,参数为true

判断元素中是否有子节点:hasChildNodes()
	返回值:如果有子节点返回true,否则返回false