DOM节点的增删改 DOM事件
2016-09-09 14:30
148 查看
增
var newNode=document.createElement(‘p’) 返回标签节点或属性节点
var newNode=document.createTextNode(‘text’) 返回文本节点
pnode.appendChild(node) 在父节点内最后追加子元素
pnode.insertBefore(newNode,indexNode) 某节点前插入一个节点
var newNode=oldNode.cloneNode(bool); 返回相同节点 参数为真,同时复制子节点,为假,不复制
删除节点必须站在其父节点的高度,删除子节点。 找到这个元素再找到他的父元素,从父元素调用删除函数
pnode.removeChild(node)
节点替换
创建新的节点,找到旧的节点,站在其父元素的高度调用函数:
pnode.replaceChild(newNode,oldNode)
直接插入html,不是w3c标准,但是各主流浏览器都适用,非常好用
innerHTML属性,直接读取修改内部HTML代码
修改属性节点,一种是在标签里的属性,找到后.shuxing 一种是css中style属性,找到.style.shuxing 样式表怎么改 ? xxx.css文件
DOM监听事件
可以分成三类,一律小写:重点:
鼠标相关 onclick onmouseover onmouseout ondbclick
页面相关 onblur失去焦点时 onload 页面加载完后 onunload关闭时 onfoucus获得焦点时
键盘相关(不一定准)onsubmit表单提交时 onchange onkeydown 等等
onload 例如 如果在,<script>里调用函数操作标签,而标签在<script>后面还未加载,那么就没有效果
这时可以用onload。<body onload="function();">....
.style.display=‘block’ 出现 style.display=‘none’ 消失
特殊 onsubmit 在表单提交时触发事件,但是想达到拦截效果得手动拦截,地址栏不变化,真正阻拦
<script>
function1(){
...
return false;
}
</script>
<form onsubmit="return function1();">
...
</form>
结构,样式,事件分离
div+css样式,事件中script脚本中以属性的方式添加。
function f(){}
document.getElementById("dd").onblur=f;//赋一个函数引用
var newNode=document.createElement(‘p’) 返回标签节点或属性节点
var newNode=document.createTextNode(‘text’) 返回文本节点
pnode.appendChild(node) 在父节点内最后追加子元素
pnode.insertBefore(newNode,indexNode) 某节点前插入一个节点
var newNode=oldNode.cloneNode(bool); 返回相同节点 参数为真,同时复制子节点,为假,不复制
删除节点必须站在其父节点的高度,删除子节点。 找到这个元素再找到他的父元素,从父元素调用删除函数
pnode.removeChild(node)
节点替换
创建新的节点,找到旧的节点,站在其父元素的高度调用函数:
pnode.replaceChild(newNode,oldNode)
直接插入html,不是w3c标准,但是各主流浏览器都适用,非常好用
innerHTML属性,直接读取修改内部HTML代码
修改属性节点,一种是在标签里的属性,找到后.shuxing 一种是css中style属性,找到.style.shuxing 样式表怎么改 ? xxx.css文件
DOM监听事件
可以分成三类,一律小写:重点:
鼠标相关 onclick onmouseover onmouseout ondbclick
页面相关 onblur失去焦点时 onload 页面加载完后 onunload关闭时 onfoucus获得焦点时
键盘相关(不一定准)onsubmit表单提交时 onchange onkeydown 等等
onload 例如 如果在,<script>里调用函数操作标签,而标签在<script>后面还未加载,那么就没有效果
这时可以用onload。<body onload="function();">....
.style.display=‘block’ 出现 style.display=‘none’ 消失
特殊 onsubmit 在表单提交时触发事件,但是想达到拦截效果得手动拦截,地址栏不变化,真正阻拦
<script>
function1(){
...
return false;
}
</script>
<form onsubmit="return function1();">
...
</form>
结构,样式,事件分离
div+css样式,事件中script脚本中以属性的方式添加。
function f(){}
document.getElementById("dd").onblur=f;//赋一个函数引用
相关文章推荐
- DOM(文档对象模型)--1获取节点、节点的增删改
- JS实现动态添加DOM节点和事件的方法示例
- DOM节点操作 增删改
- 给ajax动态加载的dom节点添加鼠标事件
- 万恶的IE之动态添加DOM节点触发window.resize事件
- javascript dom 节点对象的原生事件和自定义事件
- 第5天(就业班) BOM、window对象、事件、location对象、screen对象、Dom编程根据属性找节点、通过关系找节点、添加附件、联动框、操作元素的css样式、正则表达式
- jQuery(二)DOM增删改,样式操作,文档加载,事件,冒泡,事件对象
- 【php基础班】第14天 DOM概述、节点的访问、随机显示星星、HTMLDOM简介和访问、元素对象属性、事件对象
- 节点操作,节点属性的操作及DOM event事件
- DOM 节点属性,增删改节点属性
- Js(DOM)动态添加节点和事件
- 跨浏览的DOM节点事件监听器
- 黑马程序员_学习日记63_710jQuery2(属性选择器、表单选择器、操作Dom节点、事件、动画)
- dom节点修改事件
- IE之动态添加DOM节点触发window.resize事件
- IE之动态添加DOM节点触发window.resize事件
- 手动触发dom节点事件代码
- 跨浏览的DOM节点事件监听器
- DOM中监听节点变化的事件(变动事件)的用法 — 第13.4.6节