dom节点操作

最新推荐文章于 2024-01-04 20:20:53 发布

奥吼吼~~

最新推荐文章于 2024-01-04 20:20:53 发布

阅读量142

点赞数

分类专栏： js 文章标签： dom节点

本文链接：https://blog.csdn.net/zhoulib__/article/details/90577254

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

获取节点元素的几种方法

document.getElementById(""); // 通过元素选出Id选出
document.getElementsByClassName(""); // 通过元素选出class选出
document.getElementsByTagName(""); // 通过元素的标签名选出
document.getElementsByName(""); // 通过元素的name属性的值选出

他们都是document里的方法所以前面都有document.
值得一提的时getElement后有s的获取出来的时一个元素的集合，他类似数组，并且有数组的一些属性。
eg

<body>
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<script>
			var a = document.getElementsByTagName("input");
			console.log(a);
		</script>
</body>

在这里插入图片描述

<body>
		<input type="text" value="1"/>
		<input type="text" value="2"/>
		<input type="text" value="3"/>
		<input type="text" value="4"/>
		<script>
			var a = document.getElementsByTagName("input");
			console.log(document.getElementsByTagName("input")[1]);// 打印出value="2"的input元素
			console.log(a[0]); // 打印出value="1"的input元素
			console.log(a.iteam(2)); // 打印出value="3"的input元素
		</script>
</body>

获取的到的元素时document里的对象，既然是对象就会有属性和方法

<body>
		<input type="text" value="1"/>
		<input type="text" value="2"/>
		<input type="text" value="3"/>
		<input type="text" value="4"/>
		<script>
			var a = document.getElementsByTagName("input");
			console.log(a[0].value); // 1
			console.log(a[1].type); // text
			console.log(a.iteam(2).value); // 3
			console.log(a[3].getAttribute("value")); // 4   attribute：属性
		</script>
</body>

!!!
!!!

创建一个属性节点

var attribute = document.createAttibute("style"); 
console.log(attribute); // style="  " 创建出来的属性节点没有值  ，这个是放到行间的

对属性节点赋值

attribute.value = "color:red";
console.log(attribute); // style="color:red"

创建元素节点

var element = document.createElement("div");

创建文本节点

var textnode = document.createTextNode("文本内容");

将文本节点给元素节点

element.appendChilid(text); //没有冒号
console.log(element); //<div>文本内容</div>

将属性节点给元素节点

element.getAttributeNode(attribute);
console.log(element); // <div style="color:red">文本内容</div>

将创建的元素节点放到页面里

var body = document.getElementsByTagName("body")[0];// 获取body元素
body.appendChild(element); // a.appendChild(b)方法会把b元素放到a元素里的最后一位

！
！
！
元素节点之间的操作

<body>
<div>
       <p>
           <i></i>
           <a></a>
       </p>
       <span></span>
</div>
<script>
var a = document.getElementsByTagName("a")[0];// 获取<a></a>
var p = doucment.getElementsByTagName("/p")[0]; // 获取<p></p>
var span = doucment.getElementsByTagName("span")[0]; // 获取<span></span>
console.log(a.parentNode); //<p>……</p> 获取a节点的父节点
console.log(a.parentNode.parentNode); //<div>……</div>获取a节点的父节点的父节点
console.log(a.nextElementSibling); // null 证明元素节点属于对象 获取a节点的同级的下一个元素节点
console.log(a.nextSibling);  // #text 获取a节点的同级的下一个节点 这个获取的是文本节点
console.log(a.previousElementSibling);// null  获取a节点的同级的上一个元素节点
console.log(a.previousSibling);  // #text 获取a节点的同级的上一个节点 
console.log(p.nextElementSibling); // <span>……</span>
console.log(p.children);// 返回p节点内所有的元素节点集合（HTMLCollection）
console.log(p.chidNodes);// 返回p节点内所有的节点集合(NodeList)（有文本节点还有元素节点）
console.log(p.lastChild); // 返回p节点内最后的节点#text(文本节点)
console.log(p.lastElementChild); // 返回p节点内最后的元素节点<a></a>
console.log(p.firstChild);//#text
console.log(p.firstElementChild);//<i></i>
console.log(p.ownerDocument);// #document 
console.log(a.ownerDocument);// #document
console.log(p.nodeType); // 1  nodeType返回节点的类型  1表示元素节点 2表示属性节点 3表示文本节点
console.log(p.previousSibling.nodeType); // 3
console.log(a.parentNode.nextElementSibling);// <span>……</span>
</script>
</body>

以上是节点的属性可以叠加使用
节点的方法
主要有增、删、改、查

removeChild(node);// 删除子节点
replaceChild(newnode,oldnode);// 替换节点
appendChild(node);//插入节点；
insertBefore(a,b);// 将a节点放到b节点前
setAttribute("属性名","属性值") ；// 给节点添加属性
getArrtibute("属性名"); // 查看节点属性

<body>
<div>
       <p class="ay" id="id">
           <i></i>
           <a></a>
       </p>
       <span> </span>
</div>
<script>
//var a = document.getElementsByTagName("a")[0];
//var p = document.getElementsByTagName("p")[0];
 //var span = document.getElementsByTagName("span")[0];/获取span的节点
 //var s =span.childNodes[0]; //选出span下的文本节点“ ”
 //span.replaceChild(p,s);//将p节点替换掉s节点  原来的节点p被删除 被剪切走了不是复制
//console.log(p.parentNode.removeChild(p));//（自己删自己）返回删除节点<p class="ay"><i></i><a></a></p>
//console.log(p.insertBefore(span,a)); // 将节点span剪切到节点a之前
// console.log(p.getAttribute("id"));// id
// console.log(p.getAttribute("class"));// ay
// console.log(p.setAttribute("style","color:red")); //  <p class="ay" id="id" style="color:red">
</script>

奥吼吼~~

关注

0
点赞
踩
1

收藏

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

获取节点元素的几种方法document.getElementById(""); // 通过元素选出Id选出document.getElementsByClassName(""); // 通过元素选出class选出document.getElementsByTagName(""); // 通过元素的标签名选出document.getElementsByName(""); // 通过元素的na...
复制链接

扫一扫

专栏目录