day10 - javascript中的DOM和节点相关操作

最新推荐文章于 2024-04-26 16:47:03 发布

小王遨游到太空

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量404

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45274291/article/details/106480257

版权

document object model == 文档对象模型
document对象，属于window对象，在documet前面应该加window对象。当然，可以省略window对象。

1.获取元素：

(1)通过document获取节点
document.getElementById("标签id名"); // 通过标签的id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签class类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
注意:上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合(类数组),因为不具有唯一性,要得到具体的标签需要取下标（0 - ...）

(2)使用css选择器获取元素：
documen.querySelector(css选择器); // 获取到匹配css的第一个元素
documen.querySelectorAll(css选择器); // 获取到匹配css的所有元素
注意：getElements和querySelectorAll获取到的都是伪数组，但是当遍历元素的时候，querySelectorAll可以使用forEach方法遍历，但是getElements不行，只能使用for来遍历

2.属性操作：

元素.setAttribute(属性名,属性值)  // 设置元素的属性(原本没有就是添加；原本有就是修改)
元素.getAttribute(属性名);       // 获取元素属性
元素.removeAttribute(属性名);    // 删除元素属性

3.内容操作：

(1)DOM元素.innerHTML - 可以设置/获取 当前标签内部 带有标签的内容
DOM元素.innerHTML=“<b>文字</b> ”；//显示加粗的文字俩字

(2)DOM元素.innerTEXT - 可以设置/获取 当前标签内部 文本内容
DOM元素.innerTEXT=“<b>文本</b> ”；//不能解析标签

(3)DOM元素.outerHTML - 可以设置/获取 包含当前标签的带标签文本
DOM元素.outerHTML=“<b>文本</b> ”；//b标签会替换掉原本的标签

4.样式操作：

DOM元素.style.css属性 = 值；
DOM元素[style][css属性] = 值；

eg:
<body>
<style type="text/css">
    #box{
        width:100px;
        height:100px;
        background:#f00;
    }
</style>
    <input type="button" id="btn" value="走你">
    <div id="box"></div>
</body>
<script type="text/javascript">
    var n = 0;
    document.getElementById("btn").onclick=function(){
        n += 100;
        document.getElementById("box").style.marginLeft = n + "px"
    }
</script>

5.类名操作：

元素.className = "类名字符串"
    元素.className = " "//空时就表示不要类名

eg:
<body>
    <div class="box"></div>

    <script>
        var div = document.querySelector('div')
        div.className = 'test'
        console.log(div) // <div class="test"></div>
    </script>
</body>

元素.className = "类名字符串"这种方法，只能存在一个class类名，多次设置会覆盖。

以下方法可以添加多个class类名：
添加一个class:
    元素.classList.add()
移出一个class:
    元素.classList.remove()

6.html基本结构的操作：

1. document.body // body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取
2. document.documentElement // 可以获取html元素及其所有内容
3. document.head // 可以直接获取head元素
4. document.title // 可以直接获取title的文本

DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。
DOM节点分三种：元素节点、文本节点、属性节点。元素节点就是我们获取到的标签元素；标签里面的文本就是文本节点、标签上的属性就是属性节点。

7.DOM节点的获取：

（1）获取节点

获取文本节点(空格、换行)、元素节点

节点	语法
所有节点	元素.childNodes
第一个节点	元素.firstChild
最后一个节点	元素.lastChild
上一个兄弟节点	元素.previousSibling
下一个兄弟节点	元素.nextSibling
父节点	元素.parentNode

（2）获取元素节点

只获取元素节点，不会获取文本节点(空格、换行)

元素节点	语法
所有子元素节点	元素.children
第一个子元素节点	元素.firstElementChild
最后一个子元素节点	元素.lastElementChild
上一个兄弟元素节点	元素.previousElementSibling
下一个兄弟元素节点	元素.nextElementSibling
父元素节点	元素.parentElement

（3）属性节点

属性节点	语法
获取标签的所有属性	元素.attributes

8.节点属性：

文本节点、元素节点、注释节点、属性节点

(1)nodeType：节点类型
<body>    
	<div id="box" name="hezi">        
		<p class="part" >段落标签</p>        
		<a href="#" title="跳转百度">链接</a>        
		<span>span标签</span>        
		<!-- div结束 -->    
	</div>
</body>

<script type="text/javascript">    
	var Odiv = document.getElementById("box"); // div元素节点    
	var text = Odiv.firstChild; // 文本节点(中间的换行和空格)    
	var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释    
	var attr = Odiv.attributes[0]; // div的第一个属性，是属性节点     
	console.log(Odiv.nodeType); // 1:元素节点    
	console.log(text.nodeType); // 3:文本节点    
	console.log(note.nodeType); // 8:注释节点    
	console.log(attr.nodeType); // 2:属性节点
</script>
3：文本节点
1：元素节点
8：注释节点
2：属性节点

(2)nodeName：节点名称
<body>    
	<div id="box" name="hezi">        
		<p class="part" >段落标签</p>        
		<a href="#" title="跳转百度">链接</a>        
		<span>span标签</span>        
		<!-- div结束 -->    
	</div>
</body>

<script type="text/javascript">    
	var Odiv = document.getElementById("box"); // div元素节点    
	var text = Odiv.firstChild; // 文本节点(中间的换行和空格)    
	var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释    
	var attr = Odiv.attributes[0]; // div的第一个属性，是属性节点      
	console.log(Odiv.nodeName); // DIV    
	console.log(text.nodeName); // #text    
	console.log(note.nodeName); // #comment    
	console.log(attr.nodeName); // id
</script>

#text：文本
#comment：注释
标签名的大写形式：标签元素
说明：元素节点的节点名称是大写的标签名；文本节点的节点名称是 #text ；注释节点的节点名称是#comment ；属性节点的节点名称是属性名。

(3)nodeValue：节点值
<body>
    <div id="box" name="hezi">        
    	<p class="part" >段落标签</p>        
    	<a href="#" title="跳转百度">链接</a>        
    	<span>span标签</span>        
    	<!-- div结束 -->    
    </div>
</body>

<script type="text/javascript">    
	var Odiv = document.getElementById("box"); // div元素节点    
	var text = Odiv.firstChild; // 文本节点(中间的换行和空格)    
	var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释    
	var attr = Odiv.attributes[0]; // div的第一个属性，是属性节点      
	console.log(Odiv.nodeValue); // null    
	console.log(text.nodeValue); // "换行和空格"    
	console.log(note.nodeValue); // "div结束" --注释内容    
	console.log(attr.nodeValue); // "box" -- 属性值
</script>

文本内容：文本
null：标签元素
注释内容：注释
说明：元素节点没有节点值；文本节点的值就是文本内容；注释节点的内容就是注释的内容；属性节点的内容就是属性的值。

9.节点操作：

（1）创建节点：

属性名	功能	语法
createElement	创建元素节点（创建标签）	document.createElement(元素标签)
createAttribute	创建属性节点（创建属性，只有属性名，没有属性值）	document.createAttribute(元素属性)
createTextNode	创建文本节点（创建了一个内容）	document.createTextNode(文本内容)

（2）插入节点：

属性名	功能	语法
appendChild	向节点的子节点列表末尾添加新的子节点	父节点.appendChild(所添加的新节点)
insertBefore	在已知的子节点前插入一个新的子节点	父节点.insertBefore(所要添加的新节点，已知子节点)

（3）替换节点：

语法：父节点.replaceChild(新节点,被替换的旧节点)

（4）复制节点：

语法：被复制的节点.cloneNode( ) // 只复制一个空节点
被复制的节点.cloneNode(true) // 表示复制的节点包括里面的内容

（5）删除节点：

语法：父元素.removeChild(要删除的节点)

10.获取元素样式：

通过style属性来获取元素的样式：元素.style.css属性 = 值；
通过style属性来获取元素的样式有缺陷：只能获取行内样式，不能获取到内联和外联的样式。
获取所有方式的样式（内联、外联、行内）：window.getConputedStyle(元素).css属性;
在ie中有兼容问题：元素.currentStyle；

兼容写法：
function getStyle(ele ，attr){   //ele：元素   attr：标签    
	if（window.getComputedStyle）{        
		return window.getComputedStyle(ele)[attr]    
	}else{        
		return ele.currentStyle[attr]；    
	}
}

11.元素间距和位置：

获取的位置/间距	语法
获取左边的间距	元素.offsetLeft
获取上边的间距	元素.offsetTop
获取到设置过定位的父元素	offsetParent
获取元素自己的宽度(包含边框)	元素.offsetWidth
获取元素自己的高度(包含边框)	元素.offsetHeight
获取元素自己的宽度(不包含边框)	元素.clientWidth
获取元素自己的高度(不包含边框)	元素.clientHeight

在这里插入图片描述

12.DOM获取窗口大小：

BOM获取浏览器窗口大小(包含滚动条)：
	window.innerWidth
	window.innerHeight
DOM获取浏览器窗口大小(不包含滚动条)：
	document.documentElement.clientWidth
	document.documentElement.clientHeight

小王遨游到太空

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day10 - javascript中的DOM和节点相关操作

document object model == 文档对象模型document对象，属于window对象，在documet前面应该加window对象。当然，可以省略window对象。1.获取元素：(1)通过document获取节点document.getElementById("标签id名"); // 通过标签的id名获取标签document.getElementsByTagName("标签名"); // 通过标签名获取标签document.getElementsByClassName("
复制链接

扫一扫