DOM： Document Object Model，文档对象模型；js提供了丰富的api来 *** 作文档内容。
DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body
节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。
可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点
特殊的元素节点：
1、html元素
2、body元素
3、head元素
节点 *** 作的api（属性和方法）
1、nodeName：只读属性，可以读取节点名称
2、nodeType：只读属性，读取节点类型
3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。
4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法
5、firstChild：获得节点的第一个子节点
6、lastChild：获得节点的最后一个子节点
7、querySelector()：
参数：string类型，css选择器
作用：获得文档中第一个符合选择器条件的节点
兼容：在IE9以下不支持
8、 querySelectorAll()： // 获得的都是静态集合
参数：string类型，css选择器
作用：获得文档中所有符合选择器条件的节点集合（类数组结构）
兼容：在IE9以下不支持
注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。
9、previousSibling：获取节点的前一个兄弟节点
10、nextSibling：获取节点的后一个兄弟节点
11、parentNode：获得节点的父节点（父节点一定是元素节点）
12、removeChild()：节点删除它的指定子节点
DOM *** 作元素：暂时不用的隐藏、一定不用的删除。
13、cloneNode()：克隆一个节点
参数：boolean类型，true深克隆，false浅克隆，默认浅克隆
深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点
浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点
14、areplaceChild(b,c)：用b替换c
其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。
15、areplaceWith(b)：用b替换a
a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。
16、ainsertBefore(b,c)：在c前面插入b
其中，a是c的父节点，c是已经存在的节点，b是新节点
17、aappendChild(b)：在a末尾追加b
a是父节点，b是a的子节点, c是子节点
元素节点的相关api
1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）
区别：HTMLCollection 是动态集合，NodeList 是静态集合。
2、createElement()：根据标签名创建新元素
3、id：读写属性，可以读取或设置元素的id值
4、className：读写属性，可以读取或设置元素的class值
5、classList：读取标签的类名集合（类数组结构）
add()：为元素新增类名，如果类名已存在不会重复添加
remove()：删除元素指定类名，如果类名不存在不会执行 *** 作
元素的属性分为两类：
一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过语法读取，需要通过 *** 作方法访问。
6、setAttribute(name,value)
参数：name表示要设置的属性名，value要为属性设置的值
无返回值
7、getAttribute(name)
参数：name表示要读取的属性名
返回值：返回属性的值，如果属性不存在会返回null
8、removeAttribute(name)
参数：name表示要删除的属性名
无返回值
说明：setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。
element拓展：
兼容：以下属性、方法在IE9以下不支持。
1、children：读取元素的所有元素子节点集合（类数组）
2、parentElement：读取元素的父元素节点
3、previousElementSibling：读取前一个元素兄弟节点
4、nextElementSibling：读取后一个元素兄弟节点
5、firstElementChild：读取第一个元素子节点
6、lastElementChild：读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除
利用javascript
写一个在页面点击加减按钮实现数字的累加。
简略的html大概如此。看得懂就好不要在意这些细节啊
<input
type="button"
value="+"
onclick="jia(this)"
/>
<label
class="num">0</label>
<input
type="button"
value="-"
onclick="jian(this)"
/>
样子是这样的
javascript
代码如下
<script
type="text/javascript">
function
jia(a)
{
var
nextnode
=
anextElementSibling;//获取下一个节点
alert(nextnodeinnerHTML);
var
a
=
parseInt(nextnodeinnerHTML)
a
+=
1;
nextnodeinnerHTML
=
a;
}
function
jian(a)
{
var
previousnode
=
apreviousElementSibling;
var
a
=
parseInt(previousnodeinnerHTML)
a
-=
1;
a
=
a
>
0
a
:
0;
previousnodeinnerHTML
=
a;
}
</script>
解释一下：
function
jian(a）和
function
jia(a)就是当前点击的对象了。在onclick事件接的方法里加了this;
-
nextElementSibling
获取当前节点的下一个节点(获得下一个兄弟节点)
-
previousElementSibling
获取当前节点的上一个节点
注意：
IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie
中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextElementSibling了。
上面的解释的意思的使用
nextElementSibling
和previousElementSibling
获得下一个兄弟节点和上一个兄弟节点，可以去掉换行，空格上面之类的，直接找到我们标签元素。但是下面的两个
nextSibling
previousSibling
也是得下一个兄弟节点和上一个兄弟节点的，只是在IE中好用
--------------------关键字解释
parseInt
转化功能。
a
=
a
>
0
a
:
0;----三元表达式。
获取点击元素的第一个兄弟元素的文本，可以有如下几种方法
先获取父元素，在获取第一个子元素
直接获取第一个兄弟元素
所有的方法用jQuery 非常好做， 原生js 代码非常繁琐。
最好不要在html中写js，样式，结构，行为要分离
下面我给出了原生js实现功能的一些代码。你试试jquery会非常简单的。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>111</td>
<td class="btn">点我</td>
</tr>
<tr>
<td>222</td>
<td class="btn">点我</td>
</tr>
</table>
</body>
</html><script>
var btn = documentquerySelectorAll("btn");
for(var i=0,l=btnlength;i<l;i++){
btn[i]onclick = function () {
var parent = thisparentNode;
var firstNode = parentchildNodes;
for(var i=0,l=firstNodelength;i<l;i++){
if(firstNode[i]nodeType === NodeELEMENT_NODE){
alert(firstNode[i]innerText);
return false;
}
}
}
}
</script>
相信用过JS的都知道JS是单线程的，同步的函数先执行，异步的函数先加入到一个队列中等同步执行完了再执行异步函数。基于这个JS采用异步回调的方式来处理需要等待的事件，是的代码会继续执行而不用在异步处理的地方一直等待着。同时也带来一个不好的方面，如果我们有很多的回调函数， 也就是说一个回调函数里边再嵌套一个回调一层一层的嵌套，这样就很容易进入传说中的回调地狱。
注意：异步和回调不是一个东西
下面感受一下回调地狱代码的魅力：
是挺有美感的但是阅读性很差，写法也让人感到无力，es6新出的promise对象已经es7的async await都可以解决这个问题，但是今天的主角是Promise。
Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点：（1）对象的状态不受外界影响；（2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。Promise有三种状态，分别是：Pending（进行中），Resolved(完成)，Rejected (失败)。Promise从Pending状态开始，如果成功就转到成功态，并执行resolve回调函数；如果失败就转到失败状态并执行reject回调函数。
Promise一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
Promise构造函数接收一个函数作为参数，该函数的两个参数是resolve，reject，它们由JavaScript引擎提供。其中resolve函数的作用是当Promise对象转移到成功,调用resolve并将 *** 作结果作为其参数传递出去；reject函数的作用是单Promise对象的状态变为失败时，将 *** 作报出的错误作为其参数传递出去
介绍一下Promise的api怎么使用：
1、Promiseresolve()的作用将现有对象转为Promise对象resolved;Promiseresolve('test')==new Promise(resolve=>resolve('test'))
2、Promisereject()返回一个Promise对象,状态为rejected
3、Promiseprototypethen()方法接受两个参数，第一个是成功的resolved的回调，另一个是失败rejected的回调，第二个失败的回调参数可选。并且then方法里也可以返回promise对象，这样就可以链式调用了。
4、Promiseprototypecatch()发生错误的回调函数。
5、Promiseall() // 所有的事都有完成，相当于 且，适合用于所有的结果都完成了才去执行then（）成功的 *** 作。
6、Promiserace() // 完成一个任务即可，相当于 或。(这个经常用在一些比较多的网站)
1documentgetElementById("id名")
通过id属性的值查找，返回满足条件的第一个元素
2documentgetElementsByTagName("标签名")
通过标签名来获取页面中的元素。返回的是多个标签。
并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）
3documentgetElementsByClassName("class名")
通过类名来获取页面中的元素。返回的也是多个标签
4documentgetElementsByName("表单元素name")
通过表单的name属性的值来获取元素
5documentquerySelector("div p a")
匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。
6documentquerySelectorAll("div")
获取所有满足条件的元素
7三个特殊节点
8childNodes 所有节点。包括各种节点
9fristChild 获取一个元素的第一个子节点
10lastChild 获取一个元素的最后一个子节点
11parentNode 获取一个元素的父节点
12previousSibling 获取一个元素的上一个兄弟节点
13nextSibling 获取一个元素的下一个节点
14children 只获取子元素
15firstElementChild 获取第一个元素子节点
16lastElementChild 获取最后一个元素子节点
17nextElementsibling 获取下一个元素兄弟节点
18previousElementsibling 获取上一个元素兄弟节点
19parentElement 获取父元素节点
20childElementCount 获取子元素的个数
1documentcreateElement(元素名) 创建一个元素节点
2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点
3appendChild() 添加元素到容器中
4insertBefore() 在一个节点前插入新节点
5removeChild() 删除子节点
6replaceChild() 替换子节点
7cloneNode() 克隆节点 传入true则复制所有节点
8setAttribute() 给元素设置属性
参数1：属性的名
参数2：属性的值
如果属性不存在，则添加；存在，则修改
9romveAttribute() 删除属性
参数：要删除的属性名
10getAttribute() 获取属性的值
参数：属性名
11访问 元素 id 名
boxid
12访问 元素 class 名
boxclassName
boxclassList 类数组
13获取标签名
boxtagName
boxnodeName
14innerHTML属性
innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。
值为为文本
15innerText属性
16outerHTML
跟innerHTML相比多包括了一个它自身
1访问行内（内联）样式表
2内部样式表和外部样式表的获取
getComputedStyle()
参数1：表示样式表所属的元素
参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传
兼容性问题
3获取元素实际的宽高
offsetWidth 宽
offsetHeight 高
4获取元素参考父容器的left 和 top
offsetLeft 距离左部
offsetTop 距离上部
offsetParent 查找这个元素的参照父容器
var eles = documentgetElementsByTagName('');
上面eles就是页面中所有元素的集合，用for循环即可依次取到页面上的所有元素
以上就是关于JS之DOM *** 作全部的内容，包括:JS之DOM *** 作、javascript获取dom的下一个节点方法、HTML中js怎么用某个td标签的onclick（）来获取另一个td标签中的文本值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）