1）一共12个节点类型
2）dom *** 作就是对节点进行 *** 作
3）节点的类型的获取方法notetype
4）ie9以上及chrome safari firefox 会将换行符当成节点
（1）静态获取
（2）返回带有指定ID的元素
var box1=documentgetElementById('box');
（1）根据标签名获取
（2）得到的是个数组
var div1=documentgetElementsByTagName('div')[0];
（1）根据类名获取元素
（2）动态获取
（3）得到的是一个数组
var box=documentgetElementsByClassName('box')[0];
（1）返回符合要求第一个元素
（2）通过css选择器来获取指定标签
（3）静态获取
（1）返回所有匹配元素
（2）根据css选择器来获取所有标签
（3）得到的是一个数组
获取兄弟节点
获取下一个兄弟标签
获取上一个兄弟节点
获取上一个兄弟标签
获取最后一个子节点
获取最后一个子标签
获取所有非标签类型的子节点
获取所有子标签节点
获取父节点
增加节点
var div=documentcreateElement('div');
在父元素的末尾，插入节点
在添加元素前，需要将元素先创建好
divappendChild(div);
修改指定子节点
删除指定子节点
在删除前需要先获取到被删除元素
divremoveChild(box);
删除当前节点
需要先获取到被删除的节点
divremove();
（1）设置ID
divid='box';
（2）设置class
divclassName='box';
（3）设置style
divstylewidth='10px';
（4）设置路径
imgsrc='/';
（5）自定义属性
首先 nextSibling 并不是所有浏览器执行后 结果都是一样的！
这是我写的：
<html>
<head>
<meta >
场景：var str = “hello world!”
astrchar() //返回指定下标的值
Strchar(2) //”l”
bStrindexOf() //返回指定值的下标
StrindexOf(‘e’) //’1’
cStrlastIndexOf() //返回最后指定值的下标
StrlastIndexOf(‘l’) //’9’
dStrconcat() //拼接字符串
Strconcat(“mother fuck!”) //”hello world!mother fuck!”
Consolelog(str) //”hello world!”
eStrsubstr(n,m) //从n开始截取m个字符
Strsubstr(1,2) //’el’
fStrsubstring(n,m) //从n开始m结束截取字符串，不包含m
Strsubstring(6,11) //”world”
gStrslice(n,m) //同substring，slice可以截取数组，substring不能截取数组
Strslice(6,11) //”world”
hStrsplit //返回数组
Strsplit(‘ ’) //[‘hello’, ‘world!’]
Straplit(‘l’) //[‘he’, ‘’, ‘o wor’, ‘d!’]
iStrreplace() //以下三个方法都是通过正则表达式对原字符串进行更改的
jStrmatch()
kStrsearch()
场景：const obj = {x: 0, y: 1}
Const obj2 = {x: 1, z: 2,fn: {number: 1}}
aObjectassign() //合并对象，实行的是浅拷贝
Objectassign(obj, obj2)
Consolelog(obj) //{x: 1, y: 1, z: 2,fn: {number: 1}}
bObjectcreate() //新建一个对象，可以使用原型链继承
Var newObj = Objectcreate(obj, {newValue: ‘newAdd’})
Consolelog(newObj) //{newValue: ‘newAdd’}
Consolelog(newObjx) //0
cObjectdefineProperties() //往对象里面添加或修改新属性，值类型
ObjectdefineProperties(obj, {name: {value: ‘欧’}}) //添加属性
Consolelog(obj) //{x: 0, y: 1, name: ‘欧’}
ObjectdefineProperties(obj, {name: {value: ‘林’, writable: true}}) //修改属性
Consolelog(obj) //{x: 0, y: 1, name: ‘林’}
dObjectdefineProperty() //往对象里面添加新属性，可以是引用类型
ObjectdefineProperty(obj, ‘name’, {value: function() {return ‘欧’}})
Consolelog(objname()) //’欧’
eObjectkeys() //返回对象所有key，以数组类型输出
Consolelog(Objectkeys(obj)) //[‘x’, ‘y’]
fObjectvalues() //返回对象所有的value，以数组类型输出
Consolelog(Objectvalues(obj)) //[0, 1]
场景：var arr = new array(1,2,3)
apush() //向数组尾部添加元素
arrpush(4)
consolelog(arr) //[1,2,3,4]
bunshift() //向数组头部添加元素
arrunshift(0)
consolelog(arr) //[0,1,2,3]
cpop() //删除数组尾部的元素
arrpop()
consolelog(arr) //[1,2]
dshift() //删除数组头部的元素
arrshift()
consolelog(arr) //[2,3]
eindexOf() //返回指定元素的下标
arrindexOf(2) //1
fslice(n,m) //从n开始m结束截取数组，不包括m,此方法不会更改元数组
consolelog(arrslice(1,2)) // [2]
consolelog(arr) //[1,2,3]
gsplice() //删除数组指定元素
arrsplice(1) //删除从下标1开始到最后的所有元素
consolelog(arr) //[1]
arrsplice(1,2) //删除从下标1开始往后的2个元素
consolelog(arr) //[1]
arrsplice(1,2,3,4) //删除从下标1开始往后2个元素并用3,4替代
consolelog(arr) //[1,3,4]
hreverse() //数组翻转
arrreverse()
consolelog(arr) //[3,2,1]
isort() //从小到大排序数组
arrsort()
consolelog(arr) //[1,2,3]
jforEach() //以下提供了几种遍历的方法
kmap()
lfilter() //数组过滤，如果数组的元素的对象，可以通过对象的属性名来过滤元素，用法跟C#的Linq一样。
var newArr = [{id:1,name:’元素1’},{id:2,name:’元素2’}]
consolelog(newArrfilter(item => itemid===1)) //[{id:1,name:’元素1’}]
consolelog(newArr) //[{id:1,name:’元素1’},{id:2,name:’元素2’}]
mevery()
nsome()
ofind()
pfindIndex()
增删改查
场景：<div class=”div” id=”div”></div>
adocumentcreateElement() //创建节点
var newDiv = documentcreateElement()
bdocumentcraeteTextNode() //创建文本节点
var newDivText = documentcraeteTextNode(‘这是新创建的节点’)
cdivappendChild() //向节点添加最后一个子节点
newDivappendChild(newDivText)
ddocumentgetElementById() //通过Id获取节点
var div = documentgetElementById(‘div’)
edivparentNode //获取父节点
fdivchildNode //获取子节点，返回一个集合
var child = divchildNodes
gdivnextSibling，divpreviousSibling，divfirstChild，divlastChild
分别为，获取下一个兄弟节点，上一个兄弟节点，第一个子节点，最后一个子节点。
hdivinsetBefore() //插入到特定位置
divinsetBefore(newDiv, null) //插入到最后，跟appendchild用法一样
divinsetBefore(newDiv, divfirstChild) //插入到第一个子节点之前
divinsetBefore(newDiv, divlastChild) //插入到最后节点之前
idivreplaceChild() //替换节点
divreplaceChild(newDiv, divfirstChild) //替换第一个子节点，原节点会被删除
jdivremoveChild() //删除子节点
kcloneNode(true/false) //克隆节点，true为深克隆，false为浅克隆
ldocumentquerySelector(),documentquerySelectorAll() //通过css选择器搜索匹配的节点，querySelector返回匹配的第一个节点，querySelectorAll返回所有节点
documentquerySelector(‘divdiv’) //返回class为div的div标签节点
documentquerySelector(‘#div’) //返回id为div的节点
mdocumentgetElementsByTagName(),documentgetElementsByName(),documentgetElementsByClassName() //返回符合需求的集合
ndivsetAttribute() //给元素添加属性
divsetAttribute(‘name’: ‘div’)
oremoveAttribute(),getAttribute(),hasAttribute() //各种 *** 作属性的方法
var obj=documentgetElementById("当前元素");
var node=objparentNode;
var child=nodechildNodes;
for(var i=0,ele=childlength;i<ele;i++){
var h=child[i]styleheight;
if(child[i]id==objid){
return
}
}
以上就是关于js DOM *** 作全部的内容，包括:js DOM *** 作、怎么样通过js DOM获取一个节点的文本内容、面试题汇总-JS篇01等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）