什么是DOM

document object model 的简称,意思为文档对象模型。主要用来对文档中的html节点进行操作。

Dom的操作简单示例:

<div id="t1"><div><input type="file" /> <input type="button" value="删除" onclick="del(this)"/></div>
</div>
<input type="button" value="增加" onClick="add()"/>
<script>
function add(){var t1 = document.getElementById('t1');//获取节点 var div = document.createElement('div');//创建div    var file = document.createElement('input');//创建input
    file.setAttribute('type','file');//设置input的类型为file    var btn = document.createElement('input');//创建input
    btn.setAttribute('type','button');//设置input的类型为button
    btn.setAttribute('value','删除');//设置input的value为删除
    btn.setAttribute('onclick','del(this)');//设置onclick事件
    div.appendChild(file);//把file添加到div中
    div.appendChild(btn);//把btn添加到div中
    t1.appendChild(div);//把div添加到t1中
}
function del(_this){var div = _this.parentNode;var t1 = _this.parentNode.parentNode;t1.removeChild(div);
}
</script>

Dom对象的属性与方法

返回对象集合

(1).all[];

(2).images[];

(3).anchors[];

(4).forms[];

(5).links[];

属性

document.cookie;设置或返回当前文档有关的所有cookie

document.title;返回当前文档的标题

document.domain;返回当前文档的域名

document.URL;返回当前文档的URL

元素属性及方法

getElementById('');                 返回指定 Id 的第一个对象。

getElementsByName('');        返回指定 name名称的对象集合(下标数组)。  getElementsByName('')[0];获取对象集合的第一个对象。

getElementsByTagName('');返回指定标签名的对象集合(下标数组)。  getElementsByTagName('')[0];获取对象集合的第一个对象。

.length();             返回数组长度。

.getAttributeNode();返回指定属性的节点

.getAttribute('');返回元素节点的指定属性值

.createAttribute('');创造属性

.createElement_x('');创造元素

.setAttribute();把指定属性设置或更改为指定值

.setAttributeNode();设置或更改指定属性的节点

.removeChild();从元素中移除子节点

.removeAttributeNode();移除指定的属性节点,并返回被移除的节点

.removeAttribute();从元素中移除指定属性

.replaceChild();替换元素中的子节点

.insertBefore();在指定的已有的子节点之前插入新节点

.appendChild(); 向元素添加新的子节点,作为最后一个子节点

.hasAttribute();如果元素拥有指定属性,则返回true否则返回false

.hasChildNodes();如果元素拥有子节点,则返回true,否则false

.isEqualNode();   检查两个元素是否相等

.isDefaultNamespace();指定的namespaceURI是默认的,则返回true,否则返回false

.className     class属性

.id   id属性

.tagName  标签名

.style   样式属性

.nodeName   元素名称

.nodeType   元素类型

.nodeValue  元素内容

.namespaceURI  返回元素的namespace URI

.textContent         设置或返回节点及其后代的文本内容

.innerHTML          设置覆盖节点的 HTML语句

.outerHTML          节点内追加的 HTML语句

.offsetHeight 元素高度

.offsetTop 返回元素的垂直偏移位置。

.scrollTop 返回元素上边缘与视图之间的距离。

.scrollHeight 返回元素的整体高度

.clientHeight  返回元素的可视高度

.toStrings();转换成字符串

转载于:https://www.cnblogs.com/lanchang/p/7309776.html

js里的document对象大全(DOM操作)相关推荐

  1. JavaScript入门3JS外置对象:Window、Document对象与DOM实例详解

    一)window对象 1.什么是DHTML? 1)DHTML是指操作HTML以创造各种动态视觉效果,是一种浏览器端的动态网页技术.       2)DHTML的功能:             ①动态改 ...

  2. 04-前端技术_ javaScript内置对象与DOM操作

    目录 五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...

  3. 先有对象还是先有函数,鸡生蛋、蛋生鸡的问题。有关js里内置对象Function和Object的思考

    js里创建的函数本身作为一个实例对象都是由内置对象Function作为构造函数创造出来的,所谓var f = funciton(a){b}即等同于f = new Function(a,b). 同时js ...

  4. JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作,和其他js库冲突处理

    今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...

  5. 前端入门篇(四十一)JS基础8动态修改网页内容(DOM操作)

    基本概念: 1.DOM操作:JS动态修改网页内容 2.DOM树: 将html文件转换为机器能看得懂的数据结构: 包含document文档节点.标签节点.text文本节点.comment注释节点等: d ...

  6. JS中window.document对象

    小知识点注:外面双引号,里面的双引号改为单引号:                  在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中                  文本框取出来 ...

  7. 原生js绑定事件的方法和dom操作

    1.行内绑定:在标签上写οnclick="事件名" <button onclick="handleClick">Click Me</butto ...

  8. 前端05.js入门之BOM对象与DOM对象。

    一.关于BOM对象. BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 用于操控用户浏览器. 1. ...

  9. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

最新文章

  1. Hadoop生态圈-Hive的自定义函数之UDF(User-Defined-Function)
  2. Day 6:Vector类和实现Hashset以及登录窗口的模拟
  3. 宝塔+wordpress搭建/迁移网站
  4. pythontype函数使用_Python astype(np.float)函数使用方法解析
  5. Android--JNI编程详解
  6. jq php 获取机器码,jquery实现聊天机器人
  7. flask和ajax实现前后端交互
  8. RRT算法原理和代码详解(快速扩展随机树)
  9. protoc执行命令
  10. FFmpeg结构体分析: AVCodecContext编解码器上下文
  11. 使用Nginx反向代理豆瓣Api电影接口(解决微信小程序频繁调用api被关小黑屋)
  12. 阿里云服务器共享型、计算型和通用型有什么区别?
  13. AirPods Pro 一直断线?如何修复
  14. Excel的官方网站
  15. 内网渗透(五十二)之域控安全和跨域攻击-搭建和查看域信任关系
  16. 关于激励(如何发挥员工积极性)
  17. Java面向对象期末备考
  18. 安卓开发-模拟登陆上海理工大学-方正教务系统(HttpsURLConnection)
  19. 电脑读不出u盘解决办法
  20. 上海财经大学本科毕业论文答辩PPT模板

热门文章

  1. 【目标检测】yolo系列:从yolov1到yolov5之YOLOv5训练自己数据集(v6.0)
  2. python xpath用法_Python--xpath的使用
  3. java中json重复数据结构_JS实现去除数组中重复json的方法示例
  4. java response.write_response设置编码方式 print和write方法的对比
  5. mysql ls命令,Linux 常用 ls命令详解
  6. 我叫Java,2019年总结,大家请查收
  7. C语言中的指针和内存泄漏
  8. 站在巨人的肩膀上,Adrian与dlib中face_recongnition模块的贡献者Adam的采访部分翻译
  9. 使用Python,OpenCV,面部标志进行面部对齐
  10. GitHub开源:100美元自制激光雷达