DOM 增删改查

要进行DOM的增删改查的操作,首先要先搞懂:

什么是dom?

Document Object Model,即文档对象模型。DOM把一份文档表示为一棵树,这是理解DOM模型的关键。是由节点(node)构成的一棵节点树。那么问题又来了:

节点是什么?

DOM中有许多不同类型的节点。其中最重要的有三种:元素节点(element node),文本节点(text node)和属性节点(attribute node)。有了节点,我们就可以很方便地通过定位节点,快速的对节点进行增删改查的操作。

查:

以下是一些查找节点的方法:
getElementById()getElementsByTagName()getElementsByName()getElementsByClassName()
querySelector()querySelectorAll()

getElementById():

getElementById()方法,接受一个参数:获取元素的ID。如果找到相应的元素则返回该元素的 HTMLDivElement对象,如果不存在,则返回null。id表示一个元素节点的唯一性,不能同时给两个或以上的元素节点创建同一个命名的id。当我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问它的一系列属性。举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="content"name="va" class="n1" style="color:blue">内容</div>
<p id="main" name="va" class="n2">正文</p>
<span id="foot" name="va" class="n1">结尾</span>

  <script>
    var tag = document.getElementsById("content").innerHTML
    console.log(tag)
  </script>
</body>
</html>

最后console.log((id.innerHTML)得到的结果是"内容"

getElementsByTagName():

getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表。接上举例:

  <script>
    var tag = document.getElementsByTagName("p").length
    console.log(tag)
  </script>

最后document.getElementsByTagName("p").length返回了页面中总共有1个p。

getElementsByName():

getElementsByName()方法可以获取相同名称(name)的元素,返回一个对象数组HTMLCollection(NodeList)。举例:

  <script>
    var tag = document.getElementsByName("va")[1].innerHTML
    console.log(tag)
  </script>

最后document.getElementsByName("va")[1].innerHTML返回了第二个name的值为va的元素的innerHTML:"正文"

getElementsByClassName():

getElementsByClassName()方法接受类名参数返回一个具有相同类名的元素的数组,返回一个对象数组HTMLCollection(NodeList)。举例:

  <script>
    var tag = document.getElementsByClassName("n1")[1].innerHTML
    console.log(tag)
  </script>

最后 document.getElementsByClassName("n1")[1].innerHTML返回了第二个class为n1的元素的innerHTML:"结尾"

getAttribute():

getAttribute()方法将获取元素中某个属性的值。举例:

<script>
    var tag = document.getElementById("content").getAttribute("name")
    console.log(tag)
 </script>

最后document.getElementById("content").getAttribute("name")获得了id=content元素的name值:"va"

querySelector():

querySelector()方法返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素,并按照子节点数量的顺序迭代顺序节点)。举例:

<script>
    var tag = document.querySelector(".n1").innerHTML
    console.log(tag)
  </script>

最后document.querySelector(".n1").innerHTML获得class=n1的第一个元素的innerHTML:"内容"

querySelectorAll():

querySelectorAll()方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList。

  <script>
    var tag = document.querySelectorAll(".n1")[1].innerHTML
    console.log(tag)
  </script>

最后document.querySelectorAll(".n1")[1].innerHTML返回所有符合class=n1的元素中,第二个元素的innerHTML:"结尾"

改:

修改HTML元素:

修改元素内容:

document.getElementById(id).innerHTML=new value,如修改id为content元素的文本内容,可以这样:

   var text = document.getElementById('content').innerHTML="修改内容"
   console.log(text)
  </script>```
于是content的文本内容就会替换成```"修改内容"```
####修改元素属性:
document.getElementById(id).attribute=new value,如修改id为content的元素的name值:

<script>
var name = document.getElementById('content').name="new name"
console.log(name)
</script>

content的name值就会替换成```"new name"```

###修改元素CSS:
document.getElementById(id).style.property=new style,如修改id为content的元素的color值:

<script>
var name = document.getElementById('content').style.color="red"
</script>

content的文本内容会变成红色。
####setAttribute()方法:
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数:属性名和值。如果属性本身已存在,那么就会被覆盖。

<script>
var content = document.getElementById('content')
content.setAttribute('style','color:red')
</script>

上面例子中id为content的元素文本会被修改成红色。
##增:
####添加元素节点
如需向HTML DOM添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

<script>
var div = document.createElement('div')
var node=document.createTextNode("这是新内容。");
div.appendChild(node)
var content = document.getElementById('content')
content.appendChild(div)
</script>

#####添加元素节点的方法还有以下这些:
**A.append(B) **: 把B追加到A内部(所有的A元素,以下类似)
**A.appendTo(B)** : 把A追加到B内部
**A.prepend(B)** : 把B追加到A内部的内容前(即B成为A第一个子元素)
**A.prependTo(B)** : 把A追加到B的内容前(即A成为B第一个子元素)
**A.after(B)** : 在A后追加B
**A.before(B)**: 在A前追加B
**node.insertBefore(A,B)**: 在父节点node里面的B节点前面追加A
PS:没有 insertAfter 方法.不过可以使用 insertBefore方法和 nextSibling来模拟它。
在前一个例子中,可使用下面代码将 A插入到 B后面:
**node.insertBefore(A, B.nextSibling)**
####替换节点:
parent.replaceChild(child,oldElem);

<script>
var p = document.getElementById('main')
var span = document.createElement('span')
span.setAttribute("id", "newSpan")
var span_content = document.createTextNode("新的span元素内容.")
span.appendChild(span_content)
var parentDiv = p.parentNode;
parentDiv.replaceChild(span,p);
</script>

上例中原本的P标签及里面的内容被替换成```<span id="newSpan">新的span元素内容.</span>```
####添加class:

<script>
var div = document.getElementById('content')
div.className+=" nn"
</script>

最后输出结果```<div id="content" name="va" class="n1 nn" style="color:blue">内容</div>```

**重要PS: 在这种方法追加class的过程中,要注意被添加的class" nn"前面有一个空格,否则最后添加成功之后,原class会变成"n1nn"连成了一个新的class造成错误。**
####第二种添加class的方法:

var element = document.getElementById("content");
element.classList.add("nn");

**PS:这种方法class前面不需要添加空格,最后的结果跟上面的方法相同。**
##删:
####remove():
删除该元素。

<script>
var div = document.getElementById('content')
div.remove()
</script>

上面例子中id为content的整个元素被删除了。
####parent.removeChild(child):

<script>
var div = document.getElementById('content')
var p = document.getElementById('p1')
div.removeChild(p);
</script>

上例中父元素content下的子元素P被删除了。

####child.parentNode.removeChild(child):
在不确定子元素的父元素是哪一个的时候,可以这样做:

<script>
var p = document.getElementById('p1')
p.parentNode.removeChild(p)
</script>

一样可以达到上面的移除子元素P的效果,而且不需要考虑获取其具体的父元素。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,456评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,763评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,265评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,716评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,071评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,435评论 1 212
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,751评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,437评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,148评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,411评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,912评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,281评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,913评论 3 234
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,020评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,776评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,462评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,350评论 2 262

推荐阅读更多精彩内容

  • 节点的增删改查 HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点,其中,属性节...
    柳叁叁阅读 328评论 0 0
  • DOM增删改查基本操作 基本概念 DOM是JavaScript操作网页的接口,全称为“文档对象模型”(Docume...
    _刘小c阅读 604评论 0 1
  • Title #electli{ width:100px; height:20px; background:#c4e...
    90后IT阅读 559评论 0 1
  • 什么是DOM? 外行看来前端工程师的工作就是改页面(HTML、CSS),写脚本(JavaScript)。当你意识到...
    饥人谷_enzo阅读 213评论 0 0
  • 首先,2019.8.9华为鸿蒙系统的发布,是中国人的骄傲,值得庆祝。 回顾历史,PC时代的微软操作系统,挑战者都如...
    越读者_Mlartisan阅读 802评论 0 1