DOM元素节点js常用操作

更新日期: 2019-07-30阅读: 2.3k标签: 元素

在文档对象模型 (dom) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型

节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9。


一、添加和删除节点(html 元素)

1、创建节点

1)创建该元素(元素节点);

2)向一个已存在的元素追加该元素。

语法:appendChild(newnode)

eg:

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

document.createElement("标签名"); // 创建元素节点

document.createTextNode("文本"); //创建文本节点

appendChild(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法:a.appendChild(b),把b添加到a内。


2.添加节点

appendChild(); //在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法,eg:同上。

insertBefore(); //insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:insertBefore(newnode,node);

eg:

<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>

<script type="text/javascript">
var otest = document.getElementById("test");
var newli = document.createElement("li");
newli.innerHTML="php";
//otest.insertBefore(newli,otest.lastChild);
otest.insertBefore(newli,otest.childNodes[1]);
</script>


3.删除节点

removeChild() //removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:nodeObject.removeChild(node)

eg:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

DOM 需要清楚需要删除的元素,以及它的父元素。先找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素。


4.替换节点

replaceChild //把一个给定父元素里面的一个子节点替换为另一个子节点。

语法:referencre = element.replaceChild(newChild,oldChild); //newChild: 必需,用于替换 oldChild的对象。 oldChild: 必需,被 newChild替换的对象。

eg:

<div>
<b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div>
<a href="javascript:replaceMessage()" rel="external nofollow" > 将加粗改为斜体</a>

<script type="text/javascript">
function replaceMessage(){
  var b=document.getElementById("oldnode");
  var newNode=document.createElement("i");
  newNode.innerHTML=b.innerHTML;
  b.parentNode.replaceChild(newNode,b);
}
</script>

注意:当 oldnew 被替换时,所有与之相关的属性内容都将被移除。 newChild必须先被建立。


5.访问子节点

childNodes //访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:elementNode.childNodes //可用childNodes[i]数组的形式表示第几个子元素

eg:

<div>
javascript
<p>javascript</p>
<div>jquery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var int=document.getElementsByTagName("div")[0].childNodes;
for (var i=0;i<int.length;i++)
{
document.write("名字:"+int[i].nodeName+"<br>");
}
document.write("子节点个数:"+int.length+"<br>");
</script>


6.访问子节点的第一和最后项

firstChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.firstChild //与elementNode.childNodes[0]是同样的效果。

lastChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.lastChild //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

eg:

<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write("第一个子节点:"+x.firstChild.nodeName+"<br>");
document.write("最后一个子节点:"+x.lastChild.nodeName);
</script>


7.访问父节点

parentNode //获取指定节点的父节点

语法:elementNode.parentNode

eg:

<div id="text">
<p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>

注意: 父节点只有一个,浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。


8.访问兄弟节点

nextSibling //可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:nodeObject.nextSibling

previousSibling //可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:nodeObject.previousSibling

eg:

<ul id="myList">
<li id="item1">Coffee</li>
<li id="item2">Tea</li>
</ul>
<p id="demo">点击按钮来获得首个项目的下一个同胞。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=document.getElementById("item1").nextSibling.innerHTML;
}
</script>

注意: 如果无此节点,则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

解决问题方法:判断节点nodeType是否为1, 如是为元素节点,跳过。以上就是本文的全部内容,希望对大家的学习有所帮助


链接: https://www.fly63.com/article/detial/4396

使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

在网页中,如果需要使用辅助性/装饰性的内容的时候,这就需要使用伪元素了。在使用伪元素的时候,会发现js并不真能直接控制它,这篇文章主要就介绍下如果间接的控制、修改css中伪元素的方法

CSS隐藏元素的五种方法

用css隐藏页面元素有许多种方法。1、opacity:0;2、visibility:hidden;3、diaplay:none;4、position:absolute;5、clip-path。大家可以根据具体情况选择适合的方法来隐藏元素

CSS隐藏页面元素常用方法_不同场景下使用CSS隐藏元素

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别

js动态生成html元素并为元素追加属性

动态生成HTML元素的方法有三种:document.createElement()创建元素,再用appendChild( )添加、使用innerHTML直接将元素添加到指定节点、jQuery创建节点...

原生js删除元素

通过id删除;通过class获取元素;清空一个元素,即删除一个元素的所有子元素 ;原理很简单,就是不断的判断要清空的div还有没有子节点,有的话就删除一个子节点(这里是它的首个子节点),直到删除完毕为止。

原生JS如何获取当前元素属于父元素第几个子元素

我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在父元素中的位置。原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性,额外需要注意的是该属性会遍历text节点,即回车键。

在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录

前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发现比较大小的判断就出了问题:

JS 创建元素的三种方法

动态创建元素一 document.write()body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容;动态创建元素二 innerHTML

去除inline-block元素间的间距

真正意义上的inline-block水平呈现的元素间,换行显示或者空格隔开的情况下会有间距,这是因为浏览器在解析时,会将换行等读取成一个空格导致。

什么是可替换元素?

请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。前端面试中 HTML 的题目本来就最少,而且并不难,翻来覆去也就那几样。我们之前已经谈到过最经典的 HTML 语义化 ,今天就借此机会来谈谈可替换元素。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!