admin管理员组文章数量:1573361
创建属性节点
- document.createAttribute(attributename)
.attributename:必需,要创建属性节点的名称。
<style>
.attrs{
color: red;
}
</style>
<script>
window.onload=function(){
//获取li集合
var lis=document.getElementsByTagName('li');
//创建class属性节点
var attrs=document.createAttribute('class');
//为属性节点赋值
attrs.value='attrs';
//为第二个Li添加一个class属性
lis[1].setAttributeNode(attrs);<script>
}
</script>
document.createElement() 方法可以创建一个元素对象
var p=document.createElement('div');
p.style.width='50px';
p.style.height='50px';
p.style.backgroundColor='darkred';
var ull=document.getElementsByTagName('ul');
ull.appendChild(p);
创建文档节点*
let obox = document.getElementById("box");
//.document.createElement("p")创建一个p元素。
let p = document.createElement("p");
p.document.createTextNode("softwhy")创建文本节点,并设置其文本内容为"softwhy"。
let textNode = document.createTextNode("softwhy");
//.然后通过p.appendChild(textNode)方法将文本节点追加到p元素中
p.appendChild(textNode);
p.style.backgroundColor = "red";
p.style.width = "100px";
p.style.height = "100px";
// .最后再将p节点追加到div中。
obox.appendChild(p);
克隆一个节点cloneNode() 方法
Node.cloneNode(deep)).Node:将要被克隆的节点
deep: 可选,布尔值,默认值为 false,规定是否进行深度克隆,如果参数为 true,将克隆 Node 节点以及它的后代节点
,如果参数为 false,只克隆 Node 节点本身。
案例中的文字就没有进行克隆
<div>你好啊</div>
window.onload=function(){
var div1=document.getElementsByTagName('div')[0];
var btn=document.getElementById('bt');
btn.onclick=function(){
var clonenode=div1.cloneNode(true);
document.body.appendChild(clonenode);
}
}
removechild删除子节点
js:
let btn1=document.getElementById('btn')
btn1.onclick=function(){
let obox=document.getElementById("box");
let lis=obox.getElementsByTagName("li");
obox.removeChild(lis[1]);
}
html:
<input type="button" value="abyixi" id="btn">
<ul id="box">
<li>蚂蚁部落一</li>
<li>蚂蚁部落二</li>
<li>蚂蚁部落三</li>
<li>蚂蚁部落四</li>
</ul>
remove方法可以删除节点自身。
window,onload=function(){
var divs=document.getElementsByTagName('div');
var btn1=document.getElementById('btn');
btn1.onclick=function(){
divs[0].remove();
}
}
replaceChild方法可以使用一个节点替换指定子节点
nodeObject.replaceChild(new_node,old_node)
(1).nodeObject:父节点。
(2).new_node:必需,用以替换的节点。
(3).old_node:必需,将要被替换的子节点。
var btn2=document.getElementById('btn2');
var box=document.getElementById('box');
var lis=document.getElementsByTagName('li');
var lis=box.children;
var newnode=document.createElement('li');
newnode.innerHTML='第五名';
btn2.onclick=function(){
box.replaceChild(newnode,lis[0]);}
html:
<button id="btn2">替换子元素</button>
<ul id="box">
<li>第一名</li>
<li>第二名</li>
<li>第三名</li>
</ul>
show()
(1).IE浏览器不支持此方法。
(2).edge浏览器不支持此方法。
(3).谷歌浏览器支持此方法。
(4).opera浏览器不支持此方法。
(5).火狐浏览器不支持此方法。
(6).safria浏览器支持此方法。
此方法可以显示Dialog对话框窗口
<script>
window.onload=function(){
var bt=document.getElementById('bt');
var dialog=document.getElementById('navdialog')
bt.onclick=function(){
dialog.show();
}
</srcipt>
<input type="button" id="bt" value="查看效果" />
<dialog id="navdialog">
<p>孙雪莹</p>
</dialog>
为toggle方法规定第二个参数,此参数规定方法是执行删除操作还是添加操作。
(1).true,执行添加操作。
(2).false,执行删除操作
j 讲解:点击按钮之后,可以切换样式类"a"添加或者删除,由于div元素已经具有样式类"a"
//那么首次的点击按钮可以删除样式类"a"
//当第二个点击按钮的时候,再添加此样式类"a",以此类推。
<style>
.a{width: 150px;height: 60px;}
.b{text-align: center;line-height: 60px;}
.c{background-color: #1E90FF;color: #CCCCCC;}
</style>
<script>
window.onload=function(){
var div=document.getElementById('ant');
var btt=document.getElementById('btt');
btt.onclick=function(){
div.classList.toggle('a');
}
}
</script>
blur | 指定元素失去焦点时触发此事件,通常应用于表单元素 |
---|---|
change | 具有改变的意思,change事件会在元素数据发生变化的时候触发。 |
dblclick | 件当连续快速双击元素对象时会触发此事件 |
focus | 当指定元素对象获取焦点时,就会触发此事件 |
keydown | 当一个按键被按下时此事件会被触发 |
keyup | 事件当按键被松开时触发此事件 |
mousemove | 事件鼠标指针在元素上移动时,触发此事件 |
mouseenter | 当鼠标指针进入指定元素时触发mouseenter事件。 |
mouseleave | 事件当鼠标指针离开指定元素的时候触发,与mouseenter事件对应 |
mouseout | 事件 当鼠标指针离开指定元素时触发 |
mouseover | 事件当鼠标移入指定元素或者其子元素时候触发mouseover事件。此事件与mouseenter事件比较类似, |
mouseup | 事件当鼠标按键被松开时会触发此事件。关于事件处理函数注册 |
mousedown | 事件当鼠标按键被按下时就会触发此事件 |
resize | 事件当调整浏览器窗口大小时会触发此事件 |
submit | 表单中提交按钮被点击会触发submit事件 |
select | 事件此事件会在input单行文本域或者多行文本域内文本被选中时触发。 |
scroll | 事件当拖动滚动条时就会触发scroll事件 |
previousSibling 属性可以获取指定节点紧邻的前一个节点,只读属性。
如果不具有对应的节点,此属性返回 null
返回的节点具有如下特点:
(1).必须是兄弟节点。
(2).必须是紧邻的节点。
(3).必须是上一个节点
previousElementSibling 属性可以获取当前节点紧邻的上一个同级元素节点,只读属性。
为了便于记忆和理解,previousElementSibling 可以分解成三个单词:
(1).previous:前一个。
(2).element:元素。
(3).sibling:兄弟。
nextSibling和nextElementSibling与上面相反
版权声明:本文标题:常用DOM操作 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727745914a1127797.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论