扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容介绍了“JavaScript的DOM怎么弄”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
专注于为中小企业提供网站制作、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业丹徒免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。DOM操作中增指的是增加节点,分为两部分:创建节点和插入节点。
创建节点中常用的API方法主要有:
1. document.createElement():创建指定的HTML元素
2. document.createTextNode():创建文本节点
3. document.createDocumentFrame():创建文档片段
4. document.createAttribute():创建节点属性
5. node.cloneNode():克隆节点
插入节点常用的API方法主要有:
1. node.appendChild():末尾追加一个新节点
2. node.insertBefore():插入一个新节点
这是一个段落
这是另一个段落
例子解释:
这段代码创建新的
元素:
var para=document.createElement("p");
如需向
元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=document.createTextNode("这是新段落。");
然后您必须向
元素追加这个文本节点:
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素:
element.appendChild(para);
document.createAttribute() 方法创建并返回一个新的属性节点。但是这个方法不是很常用,如果涉及到创建属性,一般使用node.setAttribute() 。
这是一个段落
这是另一个段落
var node = document.getElementById('div1'); var newAttr = document.createAttribute('title'); //创建一个新的title属性;
newAttr .nodeValue = 'Hello world!'; //title属性的值是:Hello world!
node.setAttributeNode(attr); //运用到对应的元素节点上
node.cloneNode(deep) 方法返回该节点的一个副本,deep 可选,表明是否采用深度克隆,如果为true ,则该节点的所有后代节点也都会被克隆,否则,只克隆该节点本身。
这是一个段落
这是另一个段落
var node = document.getElementById('div1');var cloneNode = node.cloneNode(true); //克隆div1整个节点;
cloneNode.id = "div2"; //修改克隆的节点id名称为div2;
document.body.appendChild(cloneNode); //在网页中追加克隆的节点;
DOM节点的删除主要API是node.removeChild();可以使用parentNode.removeChild(child)删除指定父节点parentNode的一个子节点child,并返回被删除的节点。
注意事项:这个方法是要在被删除的节点的父节点上调用的,而不是在被删除节点上调用的,如果参数节点不是当前节点的子节点,removeChild 方法将报错。
这是一个段落。
这是另一个段落。
例子解释:
这个 HTML 文档含有拥有两个子节点(两个
元素)的
这是一个段落。
这是另一个段落。
找到 id="div1"的元素:
var parent=document.getElementById("div1");
找到id="p1" 的
元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);
修改节点常用的API方法主要有:
1. appendChild():末尾追加一个新节点
2. insertBefore():插入一个新节点
3. replaceChild():替换节点
注意事项:以上几个方法都是操作的某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点,如果在不支持子节点的节点上,调用了这些方法,将会导致错误。
DOM节点中的查主要包括:查找元素和节点查找。
1. getElementById() --- 通过ID访问;
2. getElementsByClassName() --- 通过类名访问;
3. getElementsByTagName() --- 通过标签名称访问;
4. querySelector() --- 通过CSS选择器访问(单个);
5. querySelectorAll() --- 通过CSS选择器访问 (所有);
所有的节点都有这些属性,都是可以用于访问相关的node节点:
1. Node.childNodes: 访问一个单元素下所有的直接子节点元素,可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点(比如text节点或其他元素节点)。
2. Node.firstChild: 与childNodes数组的第一个项(Element.childNodes[0])是同样的效果,仅仅是快捷方式。
3. Node.lastChild: 与childNodes数组的最后一个项(Element.childNodes[Element.childNodes.length-1])是同样的效果,仅仅是快捷方式。
4. Node.parentNode: 访问当前节点的父节点,父节点只能有一个,祖节点可以用Node.parentNode.parentNode 的形式来访问。
5. Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
6. Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。
“JavaScript的DOM怎么弄”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联-成都网站建设公司网站,小编将为大家输出更多高质量的实用文章!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流