找到对象：

document.getElementById()：返回对拥有指定 id 的第一个对象的引用。

document.getElementsByName()：返回带有指定名称的对象集合。

document.getElementsByTagName()：返回带有指定标签名的对象集合。

document.getElementsByClassName()：返回对拥有指定 class 的对象集合。

操作对象：

操作属性：

取值：getAttribte()；

document.getElementsByTagName("标签名")[0].getAttribute("属性名");

赋值：setAttribte()；

document.getElementsByTagName("标签名")[0].setAttribute("属性名","属性值");

删除赋值：removeAttribute()；

document.getElementsByTagName("标签名")[0].removeAttribute("属性名");

操作样式：

内联样式：style.xxxx；

class：

1.className。

2.把class当成属性来看

element.className = 'blue';

操作内容：

表单元素：value；

document.getElementById("id名字").value;

文本框，单选框，复选框。

非表单元素：

innerHTML：

document.getElementById("id名字").innerHTML="<a href='https://www.baidu.com'>到百度</a> ";

浏览器会将inneHTML后面的内容作为html来解析。

innerText：

document.getElementById("id名字").innerText="<a href='https://www.sina.com'>到新浪</a> ";

浏览器会将innerText后面的内容作为纯文本来解析。

操作节点：

什么是节点：

1、整个文档时一个文档节点。
2、每个HTML元素是元素节点。
3、HTML元素内的文本是文本节点。
4、每个HTML属性是属性节点。
5、每个注释是注释节点。
所以HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树。通过 HTML DOM，节点树中的所有节点都可以通过 JS 进行访问。所有 HTML 元素（节点）均可被修改。

创建节点、追加节点：

createElement（标签名）创建一个元素节点（具体的一个元素）；

appendChild（节点）追加一个节点。

createTextNode（节点文本内容）创建一个文本节点。

例子：

<body>

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("这是一个新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

删除、移除节点:

removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了

    var removeChild = document.body.removeChild(div1);//移除document对象的方法div1

替换节点:

replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2

查找节点:

childNodes 包含文本节点和元素节点的子节点:

    for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。

    //nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点

    //nodeType==1 是元素节点

    //nodeType==3 是文本节点

        if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点

            console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点

        }

    }

children也可以获取子节点，而且兼容各种浏览器:

console.log(oList.children);//在控制器日志中显示oList子节点

parentNode：获取父节点:

    var oList = document.getElementById('list');//oList是做的ul的对象

    var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象

    //通过子节点查找父节点//parentNode：获取父节点

    console.log(oChild.parentNode);//在控制器日志中显示父节点

    console.log(oList.children);//在控制器日志中显

nextSibling；查找下一个兄弟节点

previousSibling：查找上一个兄弟节点

对元素节点的所有操作：

element.accessKey     设置或返回元素的快捷键。

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

element.attributes     返回元素属性的 NamedNodeMap。

element.childNodes     返回元素子节点的 NodeList。

element.className     设置或返回元素的 class 属性。

element.clientHeight     返回元素的可见高度。

element.clientWidth     返回元素的可见宽度。

element.cloneNode()     克隆元素。

element.compareDocumentPosition()     比较两个元素的文档位置。

element.contentEditable     设置或返回元素的文本方向。

element.dir     设置或返回元素的内容是否可编辑。

element.firstChild     返回元素的首个子。

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

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

element.getElementsByTagName()     返回拥有指定标签名的所有子元素的集合。

element.getFeature()     返回实现了指定特性的 API 的某个对象。

element.getUserData()     返回关联元素上键的对象。

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

element.hasAttributes()     如果元素拥有属性，则返回 true，否则返回 false。

element.hasChildNodes()     如果元素拥有子节点，则返回 true，否则 false。

element.id     设置或返回元素的 id。

element.innerHTML     设置或返回元素的内容。

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

element.isContentEditable     设置或返回元素的内容。

element.isDefaultNamespace()     如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。

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

element.isSameNode()     检查两个元素是否是相同的节点。

element.isSupported()     如果元素支持指定特性，则返回 true。

element.lang     设置或返回元素的语言代码。

element.lastChild     返回元素的最后一个子元素。

element.namespaceURI     返回元素的 namespace URI。

element.nextSibling     返回位于相同节点树层级的下一个节点。

element.nodeName     返回元素的名称。

element.nodeType     返回元素的节点类型。

element.nodeValue     设置或返回元素值。

element.normalize()     合并元素中相邻的文本节点，并移除空的文本节点。

element.offsetHeight     返回元素的高度。

element.offsetWidth     返回元素的宽度。

element.offsetLeft     返回元素的水平偏移位置。

element.offsetParent     返回元素的偏移容器。

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

element.ownerDocument     返回元素的根元素（文档对象）。

element.parentNode     返回元素的父节点。

element.previousSibling     返回位于相同节点树层级的前一个元素。

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

element.removeAttributeNode()     移除指定的属性节点，并返回被移除的节点。

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

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

element.scrollHeight     返回元素的整体高度。

element.scrollLeft     返回元素左边缘与视图之间的距离。

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

element.scrollWidth     返回元素的整体宽度。

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

element.setAttributeNode()     设置或更改指定属性节点。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData()     把对象关联到元素上的键。

element.style     设置或返回元素的 style 属性。

element.tabIndex     设置或返回元素的 tab 键控制次序。

element.tagName     返回元素的标签名。

element.textContent     设置或返回节点及其后代的文

JS操作document对象的更多相关文章

  1. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  2. JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

  3. JS操作DOM对象——JS基础知识（四）

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  4. javascript、js操作json对象和字符串互相转换方法

    相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格式 ...

  5. JS中document对象和window对象有什么区别

    简单来说,document是window的一个对象属性.Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 windo ...

  6. js操作BOM对象

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. JS中document对象 && window对象

    所有的全局函数和对象都属于Window对象的属性和方法. 区别: 1.window 指窗体.Window 对象表示浏览器中打开的窗口. document指页面.document是window的一个子对 ...

  8. JS 的 Document对象

    Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. 当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document对象 ...

  9. JS中document对象和window对象的区别

    简单来说,document是window的一个对象属性. Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 win ...

随机推荐

  1. beyong Compare4解决30天的评估期结束

    刚开始是删掉注册表的CacheId(无效) 1.在搜索栏中输入 regedit ,打开注册表2.删除项目CacheId :HKEY_CURRENT_USER\Software\Scooter Soft ...

  2. 管理系统和服务systemctl（centos6：chkconfig、service命令）

    传统:SysV init 红帽6.Ubuntu6:采用Upstart 红帽7:采用全新的Systemd SysV init运行级别,主题思想是串行的启动所有将来需要用到的服务(所以计算机没有利用多CP ...

  3. 命令序列 ; & && ||

    ; 从左到右依次被执行,返回最后一个命令的执行状态 & 该命令将在后台被执行,即在子bash中执行(或ctrl+z,bg, jobs,bg 命令号)(变量$!.$one.$two.$three ...

  4. Redis Geo HyperLogLog类型介绍

    ​Geo类型 Redis3.2.0版本推出 可以将用户给定的地理位置信息存储起来,并对这些信息进行操作 GEOADD key longitude latitude member [longitude ...

  5. 爬虫json文件存储形式

    json的表现形式和python中的字典是没有很大区别的,唯一的区别是dict的键是可hash对象,而json只能是字符串. 对于json的操作可以分为两类 一是对字符串的操作: 当需要将python ...

  6. 在vue中选中某个标签，并且对其属性进行操作

    第一步:在标签中添加ref="111"属性 第二步:this.$refs.111.属性=""   此步骤是一111为标记选中了要操作的标签,通过点属性的方法,进 ...

  7. 品优购详情页---产品详细信息区域 iteminfo_wrap

    产品详细信息区域为整个大盒子命名为: iteminfo_wrap 1号盒子命名为:sku_name 2号盒子命名为:news 3号盒子命名为:summary step1:3个盒子搭建框架,以及完成前两 ...

  8. python排序算法之一：冒泡排序（及其优化）

    相信冒泡排序已经被大家所熟知,今天看了一篇文章,大致是说在面试时end在了冒泡排序上,主要原因是不能给出冒泡排序的优化. 所以,今天就写一下python的冒泡排序算法,以及给出一个相应的优化.OK,前 ...

  9. flex布局实现瀑布流排版

    网上有很多有关js(jq)实现瀑布流和有关瀑布流的插件很多,例如:插件(Masonry,Wookmark等等).按照正常的逻辑思维,瀑布流的排版(item列表)一般都是 由左到右,上而下排序的结果,单 ...

  10. vue中的$EventBus.$emit、$on 遇到的问题

    今天在项目中遇到的一个需求: 在一个选项卡功能的页面,出现的问题是,当点击选项卡的某个选项时,会同时加载整个选项卡的数据,本身产品就很大,数据很多,所以这个问题无法忽略: 仔细研究下发现,当刚进入页面 ...