京东网站注册,上海做网站好的公司有哪些,wordpress 排版不正常,阿里巴巴网站建设论文在文档对象模型 (DOM) 中#xff0c;每个节点都是一个对象。DOM 节点有三个重要的属性 #xff1a; 1. nodeName : 节点的名称 2. nodeValue #xff1a;节点的值 3. nodeType #xff1a;节点的类型 节点类型#xff1a;元素 1 #xff0c;属性 2 #xff0c;文本 3 每个节点都是一个对象。DOM 节点有三个重要的属性 1. nodeName : 节点的名称 2. nodeValue 节点的值 3. nodeType 节点的类型 节点类型元素 1 属性 2 文本 3 注释 8文档 9。 一、添加和删除节点HTML 元素 1、创建节点 1创建该元素元素节点 2向一个已存在的元素追加该元素。 语法appendChild(newnode) eg: div iddiv1
p idp1这是一个段落/p
p idp2这是另一个段落/p
/divscript
var paradocument.createElement(p);
var nodedocument.createTextNode(这是新段落。);
para.appendChild(node);var elementdocument.getElementById(div1);
element.appendChild(para);
/script document.createElement(标签名); // 创建元素节点 document.createTextNode(文本); //创建文本节点 appendChild(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法a.appendChild(b)把b添加到a内。 2.添加节点 appendChild(); //在指定节点的最后一个子节点列表之后添加一个新的子节点。 语法eg:同上。 insertBefore(); //insertBefore() 方法可在已有的子节点前插入一个新的子节点。 语法insertBefore(newnode,node); eg: ul idtest
liJavaScript/li
liHTML/li
/ulscript typetext/javascript
var otest document.getElementById(test);
var newli document.createElement(li);
newli.innerHTMLphp;
//otest.insertBefore(newli,otest.lastChild);
otest.insertBefore(newli,otest.childNodes[1]);
/script 3.删除节点 removeChild() //removeChild() 方法从子节点列表中删除某个节点。如删除成功此方法可返回被删除的节点如失败则返回 NULL。 语法nodeObject.removeChild(node) eg: div iddiv1
p idp1这是一个段落。/p
p idp2这是另一个段落。/p
/divscript
var parentdocument.getElementById(div1);
var childdocument.getElementById(p1);
parent.removeChild(child);
/script DOM 需要清楚需要删除的元素以及它的父元素。先找到希望删除的子元素然后使用其 parentNode 属性来找到父元素。 4.替换节点 replaceChild //把一个给定父元素里面的一个子节点替换为另一个子节点。 语法referencre element.replaceChild(newChild,oldChild); //newChild: 必需用于替换 oldChild的对象。 oldChild: 必需被 newChild替换的对象。 eg: div
b idoldnodeJavaScript/b是一个很常用的技术为网页添加动态效果。/div
a hrefjavascript:replaceMessage() relexternal nofollow 将加粗改为斜体/ascript typetext/javascript
function replaceMessage(){var bdocument.getElementById(oldnode);var newNodedocument.createElement(i);newNode.innerHTMLb.innerHTML;b.parentNode.replaceChild(newNode,b);
}
/script 注意当 oldnew 被替换时所有与之相关的属性内容都将被移除。 newChild必须先被建立。 5.访问子节点 childNodes //访问选定元素节点下的所有子节点的列表返回的值可以看作是一个数组他具有length属性。 语法elementNode.childNodes //可用childNodes[i]数组的形式表示第几个子元素 eg: div
javascript
pjavascript/p
divjQuery/div
h5PHP/h5
/div
script typetext/javascript
var intdocument.getElementsByTagName(div)[0].childNodes;
for (var i0;iint.length;i)
{
document.write(名字int[i].nodeNamebr);
}
document.write(子节点个数int.lengthbr);
/script 6.访问子节点的第一和最后项 firstChild //返回‘childNodes数组的第一个子节点。如果选定的节点没有子节点则该属性返回 NULL。 语法node.firstChild //与elementNode.childNodes[0]是同样的效果。 lastChild //返回‘childNodes数组的第一个子节点。如果选定的节点没有子节点则该属性返回 NULL。 语法node.lastChild //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。 eg div idcon
pjavascript/p
divjQuery/div
h5PHP/h5
/div
script typetext/javascript
var xdocument.getElementById(con);
document.write(第一个子节点x.firstChild.nodeNamebr);
document.write(最后一个子节点x.lastChild.nodeName);
/script 7.访问父节点 parentNode //获取指定节点的父节点 语法elementNode.parentNode eg: div idtext
p idcon parentNode 获取指点节点的父节点/p
/div
script typetext/javascript
var mynode document.getElementById(con);
document.write(mynode.parentNode.nodeName);
/script 注意: 父节点只有一个浏览器兼容问题chrome、firefox等浏览器标签之间的空白也算是一个文本节点。 8.访问兄弟节点 nextSibling //可返回某个节点之后紧跟的节点处于同一树层级中。 语法nodeObject.nextSibling previousSibling //可返回某个节点之前紧跟的节点处于同一树层级中。 语法nodeObject.previousSibling eg: ul idmyList
li iditem1Coffee/li
li iditem2Tea/li
/ul
p iddemo点击按钮来获得首个项目的下一个同胞。/p
button οnclickmyFunction()试一下/button
script
function myFunction()
{
var xdocument.getElementById(demo);
x.innerHTMLdocument.getElementById(item1).nextSibling.innerHTML;
}
/script 注意: 如果无此节点则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点例如换行符号而其它浏览器不会忽略。 解决问题方法:判断节点nodeType是否为1, 如是为元素节点跳过。 以上就是本文的全部内容希望对大家的学习有所帮助 您可能感兴趣的文章: 详解JS获取HTML DOM元素的8种方法JS控制HTML元素的显示和隐藏的两种方法JavaScript中获取HTML元素值的三种方法JavaScript通过HTML的class来获取HTML元素的方法总结javascript 控制 html元素 显示/隐藏实现代码文章同步发布 https://www.geek-share.com/detail/2775368631.html 转载于:https://www.cnblogs.com/xxcn/p/11267818.html
