js dom操作方法,js中dom的用法
这篇文章给大家带来了一些关于javascript的知识，主要介绍了一些关于DOM的详细操作的相关问题，包括什么是DOM，什么是DOM树，如何获取DOM等等。下面就一起来看看吧，希望对你有帮助。
【相关推荐：javascript视频教程，web前端】
什么是 DOM ？
文档对象模型，缩写DOM，中文：文档对象模型，是W3C推荐的用于处理可扩展标记语言的标准编程接口。
什么是 DOM Tree ？
DOM树是指通过DOM解析HTML页面生成的HTML树结构和对应的访问方式。借助DOM树，我们可以直接简单地操作HTML页面上的每一个标记内容，比如下面的HTML代码。
htmlhead
播放带有标题的dom/title/headbody
p我是dom节点/p
p
pp p/p
/p/body/html被抽象为dom树，如下所示：
了解了以上知识之后，接下来就是API的学习了。我从如何获取DOM，如何创建和添加DOM，如何修改DOM，如何删除DOM四个方面来讲解。
获取 DOM
获取DOM的API有很多，但都很简单。开始
1. 通过 id 获取
语法：
document . getelementbyid(“id名称”)；示例：
身体
P id=p 我是一个节点/p
脚本
var p=document . getelementbyid( p )；
console . log(p)；
/脚本/正文
打开控制台，可以看到成功获取了。
2. 通过标签名 tag name 获取
语法：
document.getElementsByTagName(标记名)；示例：
身体
p我是p节点/p
p我也是，p node /p
脚本
var p=document . getelementsbytagname( p )；
console . log(p)；
for(设I=0；仪表板长度；i ) {
console . log(p[I])；
}
/脚本/正文
注意：getElementsByTagName()方法可以返回带有指定标记名的对象集合。因为我们得到了一个对象集合，如果我们想要操作它们，我们需要遍历其中的元素。注意：这个方法得到的元素对象是动态的。
3. 通过类名 class name 获取
语法：
document . getelementsbyclassname( class name )；示例：
身体
我是一个同性恋者
我是一个同性恋者
脚本
var p=document . getelementsbyclassname( p )；
console . log(p)；
for(设I=0；仪表板长度；i ) {
console . log(p[I])；
}
/脚本/正文
这个也很简单，记住就行了。
4. 通过 HTML5 新增api获取【推荐】
语法：
Document.querySelector(详见示例)；Document.querySelectorAll(详见示例)；示例：
身体
我是一个同性恋者
P= name 梨花/p
P= info 信息/p
脚本
//通过标记名获取
var p=document . query selector( p )；
//按类名获取，记得加点分
var qname=document . query selector(。姓名’)；
//按id获取，记得加#
var info=document . query selector(# info))；
//获取所有匹配的元素并返回一个数组
var all=document . query selector all( p )；
console . log(p)；
console . log(qname)；
console . log(info)；
for(设I=0；I所有长度；i ) {
console . log(all[I])；
}
/脚本/正文
大家可以看到，使用html5的新api非常灵活，所以我非常喜欢使用，推荐给大家。
5. 特殊元素获取
除此之外，还有一些特殊元素也有自己的获取方式，比如body和html元素。
获取 body 元素
语法：
文档.正文；示例：
身体
脚本
var body=document.body
console . log(body)；
/脚本/正文
如您所见，body元素的所有内容都已成功获取。
获取 html 元素
语法：
document.documentElement示例：
身体
脚本
var html=document . document element；
console . log(html)；
/脚本/正文
可以看到，整个网页html都被收购了，好了，至此，dom的收购告一段落。让我们开始学习动态创建和添加DOM。
创建添加 DOM
说白了，操作dom就跟玩数据一样，添加，删除，检查，而创建和添加就相当于添加。我们在添加数据的时候，首先要有数据，然后再添加。dom操作也是如此。首先要创建dom，然后告诉它添加到哪里，最后完成操作。让我们学习如何创建DOM，以及如何添加DOM。
动态创建 DOM
很简单，不用怕，哈哈
语法：
Document.createElement(“元素名称”)；示例：
如果要动态创建一个元素P，可以这样写，其他也一样。
var p=document . createelement( p )；
动态添加 DOM
添加dom有两种方式，一种是追加到父元素的子元素末尾，另一种是指定子元素后追加。
末尾追加
语法：
node.appendChild(子)；示例：
身体
p
A href= 百度/a
/p
脚本
var p=document . createelement( p )；
我是P
var p=document . query selector( p )；
p . appendchild(p)；
/脚本/正文
创建一个动态元素P段落标签，写下文字“我是P”，最后得到P元素，将P追加为P的子元素，这种追加方式是在末尾追加，所以效果如上图所示。
指定元素后追加
语法：
Node.insertBefore(子，指定元素)；示例：
身体
p
A href= 百度/a
我是span的弟弟/span
/p
脚本
var p=document . createelement( p )；
我是P
var p=document . query selector( p )；
var a=document . query selector( a )；
//在P下，A元素之前创建P
p.insertBefore(p，a)；
/脚本/正文
就这样？是啊，你觉得呢？不是很简单吗？简单就对了，剩下的就是多练了。好了，我们进入下一个环节。如何修改DOM？
修改 DOM
总结如下：
例：获取页面的P标签，将内容改为“周”
身体
p
p/p
/p
脚本
var p=document . query selector( p )；
P.innerText=周；
/script/body示例2:点击按钮生成百度的超链接
身体
p
Button onclick=createBaidu()单击生成百度超链接/button
/p
脚本
函数createBaidu() {
var p=document . query selector( p )；
var a=document . createelement( a )；
a . href= https://www . Baidu . com ；
A.innerText=百度一下，你就知道了；
p . append(a)；
}
/脚本/正文
示例：点击按钮，P标签中的文字颜色变为绿色，手动操作狗头。
身体
p
按钮onclick=changeColor()单击变为绿色/按钮
p我很快就会变绿/p
/p
脚本
函数changeColor() {
var p=document . query selector( p )；
p . style . color= green ；
}
/脚本/正文
删除 DOM
node.removeChild()方法从DOM中删除一个子节点并返回删除的节点。
语法：
node.removeChild(子)；案例：
身体
p
Button onclick=removeP()单击以删除p/button
P我是P，时间快到了/p
/p
脚本
函数removeP() {
var p=document . query selector( p )；
var p=document . query selector( p )；
p . remove child(p)；
}
/脚本/正文
【相关推荐：javascript视频教程，web前端】以上是JavaScript DOM详细操作的详细内容。请多关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。