介绍了dom的选择器主要是介绍了dom的查。
1:增
元素节点的生成 document.createElement();
var div=document.createElement('div');
这个操作只是生成了一个div对象,但是没有放在body里面。
但是的确生成了,还么用而已,我们只是需要插入到页面而已。
文本节点的生成 document.createTextNode();
var text=document.createTextNode('cyl');
里面加上你想要的内容。需要插入操作。
注释节点的生成document.createComment();
同理把内容加进出就好了,也需要插入操作。
文档碎片节点的生成document.createDocumentFragment();
插
parentNode.appendChild();
看人代码:
<div></div>
<span></span>
<script type='text/javascript'>
var div=document.getElementsByTagName('div')[0];
var span=document.getElementsByTagName('span')[0];
var text=document.createTextNode('cyl');
span.appendChild(text);
div.appendChild(span);
本来div span是并列结构,而且span里面没有什么东西。
把生成的节点丢进去就可以了。
parentNode.insertBefor(a,b);
在b的前面插入a
<div></div>
<span></span>
<script type='text/javascript'>
var div=document.getElementsByTagName('div')[0];
var span=document.getElementsByTagName('span')[0];
var text=document.createTextNode('cyl');
span.appendChild(text);
div.appendChild(span);
var span1=document.createElement('span');
div.insertBefore(span1,span);
</script>
我继续生成一个span加到div里面span的前面。
删
parentNode.removeChild();
在刚刚的状态下,继续操作。
应该看明白了吧。
上一级调用removeChild();就把对应的标签删除。
remove();
的确都删除了。
替换
parentNode.replaceChild(new,origin)
把它子孙的元素节点替换了
<div></div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div')[0];
var span=document.createElement('span');
div.appendChild(span);
var a=document.createElement('a');
</script>
应该很简单。
Element的属性
1:innerHTML
<div>
123
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div')[0];
</script>
我们直接使用属性innerHTML表示查看,如果加=,+=时就是覆盖和加上值了。
2innerText||textContent
取文本内容
<div>
<span>123</span>
<em>456</em>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div')[0];
</script>
有一些区别的。
3:查看添加元素节点的属性
ele.setAttribute();添加
ele.getAttribute();查看
<div>
<span>123</span>
<em>456</em>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div')[0];
</script>
操作大致就是这样的。