常见的Dom操作
1.什么是DOM？
DOM又称文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。
2.什么是DOM树？
DOM树有两种，分别为节点树和元素树。
节点树：把文档中所有的内容都看成树上的节点；
元素树：仅把文档中的所有标签看成树上的节点。
3.DOM常用操作
1.查找节点
|
document.getElementById('id属性值'); |
返回拥有指定id的第一个对象的引用 |
|
document/element.getElementsByClassName('class属性值'); |
返回拥有指定class的对象集合 |
|
document/element.getElementsByTagName('标签名'); |
返回拥有指定标签名的对象集合 |
|
document.getElementsByName('name属性值'); |
返回拥有指定名称的对象结合 |
|
document/element.querySelector('CSS选择器'); |
仅返回第一个匹配的元素 |
|
document/element.querySelectorAll('CSS选择器'); |
返回所有匹配的元素 |
|
document.documentElement |
获取页面中的HTML标签 |
|
document.body |
获取页面中的BODY标签 |
|
document.all[''] |
获取页面中的所有元素节点的对象集合型 |
2.新建节点
|
document.createElement('元素名'); |
创建新的元素节点 |
|
document.createAttribute('属性名'); |
创建新的属性节点 |
|
document.createTextNode('文本内容'); |
创建新的文本节点 |
|
document.createComment('注释节点'); |
创建新的注释节点 |
|
document.createDocumentFragment( ); |
创建文档片段节点 |
3.添加新节点 注（添加新节点和新建节点不同，新建的节点如果不添加到DOM中，是不会有任何效果的）
|
parent.appendChild( element/txt/comment/fragment ); |
向父节点的最后一个子节点后追加新节点 |
|
parent.insertBefore( newChild, existingChild ); |
向父节点的某个特定子节点之前插入新节点 |
|
element.setAttributeNode( attributeName ); |
给元素增加属性节点 |
|
element.setAttribute( attributeName, attributeValue ); |
给元素增加指定属性，并设定属性值 |
4.删除节点
|
parentNode.removeChild( existingChild ); |
删除已有的子节点，返回值为删除节点 |
|
element.removeAttribute('属性名'); |
删除具有指定属性名称的属性，无返回值 |
|
element.removeAttributeNode( attrNode ); |
删除指定属性，返回值为删除的属性 |
5.修改节点
|
parentNode.replaceChild( newChild, existingChild ); |
用新节点替换父节点中已有的子节点 |
| element.setAttributeNode( attributeName ); | 若原元素已有该节点，此操作能达到修改该属性值的目的 |
| element.setAttribute( attributeName, attributeValue ); | 若原元素已有该节点，此操作能达到修改该属性值的目的 |
不多说了，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>创建文本节点</h2>
<button onclick="addText()">创建文本节点</button>
<p></p>
<script>
function addText(){
//创建文本节点
var a=document.createTextNode('this is a 文本'); //创建文本节点
document.getElementsByTagName('p')[0].appendChild(a);//添加文本节点
document.getElementsByTagName('button')[0].innerHTML='你看我变了没？';//新增文本内容
var b=document.createAttribute('id'); //创建一个属性节点 也可以在创建时给他赋值
b.value='123'; //给这个属性节点赋值
document.getElementsByTagName('p')[0].setAttributeNode(b); //给p元素设置新的属性
document.getElementsByTagName('button')[0].setAttribute('id','buttonId'); //给button元素设置id属性
//创建新元素
var c=document.createElement('div'); //创建一个新元素div
var cul=document.createElement('ul'); //创建一个新元素 ul
var culli=document.createElement('li'); //创建一个新元素 li
culli.innerHTML='6'; // 新增文本内容
c.appendChild(cul).appendChild(culli); //添加子节点
document.body.appendChild(c); //往body中添加子节点 //等同于：
//var d="<ul><li>6</li>"; //字符串
//c.append(d); //jquery append方法
//document.body.appendChild(c); }
</script>
</body>
</html>
常见的Dom操作的更多相关文章
- JavaScript常见原生DOM操作API总结
[TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...
- JS中常见原生DOM操作API
摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...
- 常见的dom操作----原生JavaScript与jQuery
1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...
- 前端页面卡顿？或是DOM操作惹的祸，需优化代码
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
- DOM操作优化
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
- 解析XML文件的几种常见操作方法—DOM/SAX/DOM4j
解析XML文件的几种常见操作方法—DOM/SAX/DOM4j 一直想学点什么东西,有些浮躁,努力使自己静下心来看点东西,哪怕是回顾一下知识.看到了xml解析,目前我还没用到过.但多了解一下,加深点记忆 ...
- DOM操作 append prependTo after before
通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...
- JQuery基础DOM操作
DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...
- DOM操作--表格点击行变色
点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...
随机推荐
- js匿名函数使用&传参
function () { alert("error"); } //报错:匿名函数不能直接调用 使用 0x01 (function () { alert("Success ...
- Python学习系列提升篇------字符串
字符串是python学习中重要的内容,在以后的工作中,对字符串的处理也必少不了.下面总结一下关于字符串学习的经验. 1.1 字符串的连接和合并 用‘ + ’连接,将两个字符串相加. 合并, ...
- SharePoint Config database Log file too big – reduce it!
SharePoint Config database logs are one thing to keep an eye on since they do have a tendency to gro ...
- Linux文件压缩和解压缩命令
Linux文件压缩和解压缩命令: tar 命令(打包并压缩的话,原文件也会默认存在) -c 建立打包档案 -x 解包 -t 查看包里的类容 -r 向包里追加文件 -v 显示打包过程 -f 文件 比如: ...
- 【Spring实战】—— 11 通过AOP为特定的类引入新的功能
如果有这样一个需求,为一个已知的API添加一个新的功能. 由于是已知的API,我们不能修改其类,只能通过外部包装.但是如果通过之前的AOP前置或后置通知,又不太合理,最简单的办法就是实现某个我们自定义 ...
- FIFO认识（一）
1．什么是FIFO? FIFO是英文First In First Out 的缩写,是一种先进先出的数据缓存器,他与普通存储器的区别是没有外部读写地址线,这样使用起来非常简单,但缺点就是只能顺序写入数据 ...
- 推荐一个Chrome扩展应用，能够自动去除CSDN广告
作为一个程序员,每天编程遇到问题时,少不了前往国内著名的CSDN网站上查信息,看是否有同行遇到类似问题.很多时候根据遇到问题的错误消息进行搜索,结果都是一篇篇CSDN博客.这些博客打开后都会显示很多广 ...
- luogu P3787 冰精冻西瓜
嘟嘟嘟 好题,好题…… 看这个修改和询问,就知道要么是求完dfs序后线段树维护,要么是树剖.又因为这道题都是子树的操作,没有链上的,所以线段树就够了. 然而重点不是这个.这道题最麻烦的是线段树push ...
- （第三场） H Diff-prime Pairs 【数论-素数线性筛法+YY】
题目链接 题目描述 Eddy has solved lots of problem involving calculating the number of coprime pairs within s ...
- android jni 之C语言基础
*含义 1.乘法 3*5 2.定义指针变量 int * p://定义了一个名字叫p的变量,能够存放int数据类型的地址 3.指针运算符, //如果p是一个已经定义好的指针变量则*p表示以p的内容为地址 ...