本文我们将和大家分享原生js 操作dom ，希望对大家有用。
ng-click="brandfnc($event)"$scope.brandfnc = function($event) {
// 通过 $event.target 来获取
}
ev.target.parentelementev.target.parentelement.children[0].srcev.target.previouselementsiblingev.target.nodenameconsole.log(ev.target.outerhtml);//<button ng-click="nggetsrc($event)">获取src</button>---整个console.log(ev.target.innerhtml);//获取src--中间的内容原生js的方法:1)创建节点：createelement创建元素，
也可以使用createtextnode创建文本节点.
document.body指向的是<body>元素;document.documentelement则指向<html>元素
//创建节点
var createnode = document.createelement("p");
var createtextnode = document.createtextnode("hello world");
createnode.appendchild(createtextnode);
document.body.appendchild(createnode);
document.documentelement.appendchild(createnode);2)插入节点：appendchild，insertbefore，
insertbefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertbefore(a,b)，则a会插入在b的前面
//插入节点
var createnode = document.createelement("p");var createtextnode = document.createtextnode("hello world");
createnode.appendchild(createtextnode);
var p1 = document.getelementbyid("p1");
document.body.insertbefore(createnode,p1);3)替换和删除元素，从replacechild和removechild的字面意思看，就是删除子节点，因此调用者，需要包含子节点p1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。
//替换元素
var replacechild = document.body.replacechild(createnode,p1);//删除元素
var removechild = document.body.removechild(p1);4)节点的属性：firstchild:第一个子节点lastchild:最后一个子节点childnodes:子节点集合，获取其中子节点可以somenode.childnodes[index]或者somenode.childnodes.item(index)nextsibling:下一个兄弟节点
previoussibling：上一个兄弟节点
parentnode：父节点
<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>
复制代码
//节点属性
var ul = document.getelementbyid("ul");
var firstchild = ul.firstchild;
console.log(firstchild.innerhtml);
var lastchild = ul.lastchild;
console.log(lastchild.innerhtml);
var length = ul.childnodes.length;
console.log(length);
var secondchild = ul.childnodes.item(1);
console.log(secondchild.innerhtml);
var forthchild = ul.childnodes.item(2).nextsibling;
console.log(forthchild.innerhtml);
var thridchild = forthchild.previoussibling;
console.log(thridchild.innerhtml);
var parentnode = forthchild.parentnode;
console.log(parentnode.innerhtml);5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。
//文本片段
var fragment = document.createdocumentfragment();
var ul = document.getelementbyid("ul");
var li = null;
for (var i = 4; i >= 0; i--) {
li = document.createelement("li");
li.appendchild(document.createtextnode("item "+i));
fragment.appendchild(li);
}
ul.appendchild(fragment);6）克隆元素
somenode.clonenode(true):深度克隆，会复制节点及整个子节点
somenode.clonenode(false):浅克隆，会复制节点，但不复制子节点
//克隆
var clone = ul.clonenode(true);
document.body.appendchild(clone);
注意：1、childnodes.length存在跨浏览器的问题
可以看到有关列表的html片段没有用
<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>
这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取ul.childnodes.length的结果有差异：
在ie中，ul.childnodes.length不会计算li之间的换行空格，从而得到数值为4在ff、chrome,safari中，会有包含li之间的空白符的5个文本节点，因此ul.childnodes.length为9若要解决跨浏览器问题，可以将li之间的换行去掉，改成一行书写格式。
2、clonenode存在跨浏览器的问题
在ie中，通过clonenode方法复制的元素，会复制事件处理程序，比如，var b = a.clonenode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。
在ff,chrome,safari中，通过clonenode方法复制的元素，只会复制特性，其他一切都不会复制
因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。
ng-click="brandfnc($event)"$scope.brandfnc = function($event) {
// 通过 $event.target 来获取
}
ev.target.parentelementev.target.parentelement.children[0].srcev.target.previouselementsiblingev.target.nodenameconsole.log(ev.target.outerhtml);//<button ng-click="nggetsrc($event)">获取src</button>---整个console.log(ev.target.innerhtml);//获取src--中间的内容原生js的方法:1)创建节点：createelement创建元素，
也可以使用createtextnode创建文本节点.
document.body指向的是<body>元素;document.documentelement则指向<html>元素
//创建节点
var createnode = document.createelement("p");
var createtextnode = document.createtextnode("hello world");
createnode.appendchild(createtextnode);
document.body.appendchild(createnode);
document.documentelement.appendchild(createnode);2)插入节点：appendchild，insertbefore，
insertbefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertbefore(a,b)，则a会插入在b的前面
//插入节点
var createnode = document.createelement("p");var createtextnode = document.createtextnode("hello world");
createnode.appendchild(createtextnode);
var p1 = document.getelementbyid("p1");
document.body.insertbefore(createnode,p1);3)替换和删除元素，从replacechild和removechild的字面意思看，就是删除子节点，因此调用者，需要包含子节点p1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。
//替换元素
var replacechild = document.body.replacechild(createnode,p1);//删除元素
var removechild = document.body.removechild(p1);4)节点的属性：firstchild:第一个子节点lastchild:最后一个子节点childnodes:子节点集合，获取其中子节点可以somenode.childnodes[index]或者somenode.childnodes.item(index)nextsibling:下一个兄弟节点
previoussibling：上一个兄弟节点
parentnode：父节点
<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>
复制代码
//节点属性
var ul = document.getelementbyid("ul");
var firstchild = ul.firstchild;
console.log(firstchild.innerhtml);
var lastchild = ul.lastchild;
console.log(lastchild.innerhtml);
var length = ul.childnodes.length;
console.log(length);
var secondchild = ul.childnodes.item(1);
console.log(secondchild.innerhtml);
var forthchild = ul.childnodes.item(2).nextsibling;
console.log(forthchild.innerhtml);
var thridchild = forthchild.previoussibling;
console.log(thridchild.innerhtml);
var parentnode = forthchild.parentnode;
console.log(parentnode.innerhtml);5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。
//文本片段
var fragment = document.createdocumentfragment();
var ul = document.getelementbyid("ul");
var li = null;
for (var i = 4; i >= 0; i--) {
li = document.createelement("li");
li.appendchild(document.createtextnode("item "+i));
fragment.appendchild(li);
}
ul.appendchild(fragment);6）克隆元素
somenode.clonenode(true):深度克隆，会复制节点及整个子节点
somenode.clonenode(false):浅克隆，会复制节点，但不复制子节点
//克隆
var clone = ul.clonenode(true);
document.body.appendchild(clone);注意：1、childnodes.length存在跨浏览器的问题
可以看到有关列表的html片段没有用
<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>
这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取ul.childnodes.length的结果有差异：
在ie中，ul.childnodes.length不会计算li之间的换行空格，从而得到数值为4在ff、chrome,safari中，会有包含li之间的空白符的5个文本节点，因此ul.childnodes.length为9若要解决跨浏览器问题，可以将li之间的换行去掉，改成一行书写格式。
2、clonenode存在跨浏览器的问题
在ie中，通过clonenode方法复制的元素，会复制事件处理程序，比如，var b = a.clonenode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。
在ff,chrome,safari中，通过clonenode方法复制的元素，只会复制特性，其他一切都不会复制
因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。
相关推荐：
js操作dom对象的流程
jquery中dom操作实例分析
js如何操作dom及获取浏览器高度以及宽度
以上就是原生js 操作dom 的详细内容。