
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=documentcreateElement("p");
var node=documentcreateTextNode("这是一个新段落。");
paraappendChild(node);
var element=documentgetElementById("div1");
elementappendChild(para);
</script>
这段代码创建新的<p> 元素:
var para=documentcreateElement("p");
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=documentcreateTextNode("这是一个新段落。");
然后您必须向 <p> 元素追加这个文本节点:
paraappendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=documentgetElementById("div1");
以下代码在已存在的元素后添加新元素:
elementappendChild(para);
在获取到父节点的情况下 var parentNode =
多次执行parentNodeappendChild(已经创建好的子节点);即可多次添加子节点
场景: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() //各种 *** 作属性的方法
判断节点是否有子节点。判断节点的子节点数目是否为 0。
判断节点是否有子节点。可以通过方法判断节点是否有子节点。如果节点没有子节点,则它是叶子节点,否则它是非叶子节点。判断节点的子节点数目是否为0。可以使用属性获取节点的子节点数目。如果该属性的值为0,则该节点是叶子节点,否则它是非叶子节点。在判断叶子节点后,如果需要保留该节点的父级到子级,则可以在处理该节点时将其父级节点一同处理。
JavaScript(简称 JS)是一种脚本语言,通常用于在Web浏览器中编写交互式前端代码。
1、用 childNodes 属性,按顺序取
实现过程:首先创建一个 xml 对象,然后载入 xml 文件,再根据待取节点父节点在 xml 文件中的序号和本身的序号,确定待取节点的位置,最后返回待取节点的值。
//pId 待取节点父节点序号
//cId 待取节点序号
function getXmlNodeValue(pId, cId) {var xmlDoc = new ActiveXObject("MicrosoftXMLDOM");
xmlDocasync = false;
xmlDocload("employeeInfoxml");
var nodes = xmlDocdocumentElementchildNodes[pId]childNodes[cId];return nodeschildNodes[0]text;
}
调用方法:alert(getXmlNodeValue(1, 2));
2、用 for 循环来取
实现过程:首先创建一个 ie 支持的 xml 对象,如果发生异常,是创建一个 FireFox 支持的空 xml 对象并返回空;然后载入 xml 文件,如要发生异常也返回空;最后,通过 for 循环遍历查找与传入的节点值相同的节点,找到后返回属于该节点的属性值。
//nodeValue 待取节点的所属节点值
function getXmlNodeValueFor(nodeValue){var xmlDoc;
try {
//创建一个 ie 支持的 XML 文档对象
xmlDoc = new ActiveXObject("MicrosoftXMLDOM");
}catch(e){
try{
//创建FireFox空的XML文档对象
xmlDoc=documentimplementationcreateDocument("","",null);
}catch(e){
alert(emessage);
return "";
}
}
xmlDocasync = false;
try {
xmlDocload("employeeInfoxml");
}catch(e){
alert(emessage);
return "";
}
var xd=xmlDocdocumentElementchildNodes;
if(xd==null)
return "";
var tempValue;
for(var i=0;i<xdlength;i++){
if(xd[i]childNodes[0]childNodes[0]nodeValue==nodeValue) tempValue=xd[i]childNodes[2]childNodes[0]nodeValue;
}
return tempValue;
}
调用方法:alert(getXmlNodeValueFor("王佳琳"));
在DhtmlXtree中可以用treegetLeafCount(itemId)获取节点下的子节点数,如果你想计算的是根节点下所有的子节点的话,可以先用上面的计算出根节点下的子节点数然后在有循环判断这些子节点中那个有孩子节点然后在根据treegetLeafCount(itemId)计算此节点下的字节点数,依次循环直至最后。
以上就是关于怎么运用js或jquery,在已经获取父节点的情况下可以多次增加该节点的子节点全部的内容,包括:怎么运用js或jquery,在已经获取父节点的情况下可以多次增加该节点的子节点、面试题汇总-JS篇01、js怎么通过叶子节点判断要不要保留这个父级到子级等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)