JavaScript中对DOM对象进行操作
来源:互联网 发布:linux设置root密码 编辑:程序博客网 时间:2024/06/14 10:16
一、什么是DOM对象
DOM对象是文档对象模型,是基于浏览器编程一套API接口,通过它,我们可以访问HTML文档对象属性、方法、事件,还可以对其进行操作。
二、DOM节点树
在HTML中所有的事物都有节点,DOM将HTML文档视作节点树,通过DOM,节点树中的是所有节点都可以通过JavaScript进行访问,所有的HTML元素都可以被修改、创建、删除。
三、DOM对象方法
1.访问DOM中的元素,主要通过getElementById(),getElementsByTagName(),getElementsByClassName()方法获取,如下:
创建文本框:
UserName:<input type="text" name="uname" class="u">通过js获取文本框内容:
/通过id获取文本框内容document.getElementById("name").value;//通过标签名文本框内容document.getElementsByTagName("input")[0].value;//通过name获取文本框内容document.getElementsByName("uname")[0].value;//通过class获取文本框内容document.getElementsByClassName("u")[0].value2.给DOM中元素添加属性
创建文本框:
<input type="text" name="uname" class="u">通过js代码给input元素添加id属性
document.getElementsByTagName("input")[0].id="name";
3.在DOM元素中插入内容
div:
<div id="context">Hello,2017</div>在js中使用innerHTML属性插入内容,使用getAttribute()获取标签中的属性值
//将内容插入到指定的元素中并替换元素中已有的内容document.getElementById("context").innerHTML="节日快乐";
//获取元素中属性值document.getElementById("context").getAttribute("id");4.在DOM中添加、删除元素
div:
<div id="context"> <font color="red">Hello,2017</font></div>
1)在js中使用appendChild()在dom中追加元素
//DOM中创建button新元素var btn=document.createElement("button");//文本内容var Context=document.createTextNode("摆渡人,你值得看!");//将内容追加到button标签中btn.appendChild(Context);//在html中指定的元素中追加新元素document.getElementById("div1").appendChild(btn);2)在js中使用removeChild()在dom中删除元素
//获取父节点var pare=document.getElementById("context");//获取子节点var p=document.getElementsByTagName("font")[0];//删除父节点下面的子节点,如果不获取父节点直接来删除子节点就无法删除pare.removeChild(p)
0 1
- JavaScript中对DOM对象进行操作
- JavaScript中dom对css样式操作
- Javascript中对DOM操作的总结
- JavaScript操作DOM对象
- javaScript中dom操作
- JavaScript对DOM操作基本原则
- Javascript对DOM的操作
- JavaScript:对Dom的操作
- javascript中的对Attr(dom中属性)操作
- JavaScript对网页中节点的操作(DOM)
- JQuery Chapter3 JQuery中对DOM对象的操作
- 说说在 DOM 扩展中,JavaScript 如何对 DOM 元素进行遍历
- 利用DOM对HTML元素进行操作
- JavaScript对DOM节点进行操作(不使用第三方框架)
- JavaScript中如何对一个对象进行深度clone
- Javascript中DOM常用操作
- Html5使用Dom对象进行操作
- Jquery 中DOM对象操作
- mac 下用 brew 安装mongodb
- 【Centos 7】使用screen恢复终端连接
- 字符串匹配算法
- IntelliJ IDEA 创建Web项目
- easyui combotree 异步加载节点 加载值显示数字id无法显示文本
- JavaScript中对DOM对象进行操作
- Solr 6.0 学习(十五)Solr SearchComponent
- Shadow DOM
- 基于OpenCV和GDAL的遥感影像处理程序
- ubuntu 14.04开机出现错误“Error found when loading /root/.profile”解决(root用户登录时才会出现)
- Android Studio使用lint清除无用的资源文件
- 用nginx做node.js的反向代理
- QT错误:error: invalid use of incomplete type 'struct QScrollBar'
- gcc6.0编译开源库出错问题的解决