1. 技术文章
  2. day7JavaScript DOM操作

day7JavaScript DOM操作

由 让人想犯罪 __ 提交于 2020-01-14 17:45:42

目标

  • 理解DOM的概念和DOM树
  • DOM 节点
  • DOM 写入和查找
  • DOM 操作

DOM的概念

DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

DOM树

DOM树

html标签通过浏览器的解析后才会形成DOM树，此后HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，JavaScript都能通过DOM的提供的编程接口操作到每个节点。

元素节点

元素节点对应网页的HTML标签元素。
元素节点的节点类型nodeType值是1，节点名称nodeName值是大写的标签名，nodeValue值是null
元素节点查找

document.getElementById():返回拥有指定Id的第一个对象引用
document.getElementByName():返回带名称的对象集合
document.getElementByTagName():返回带有指定标签名的对象的集合
document.getElementByClassName():带有指定类名的对象集合
区别：第一个方法返回的是元素对象，其余3个方法返回对象集合。如要获取其中一个对象，可以用下标的方式，默认从0开始。

属性节点

元素特性节点attribute对应网页中HTML标签的属性，它只存在于元素的attributes属性中，并不是DOM文档树的一部分
属性节点的节点类型nodeType值是2，节点名称nodeName值是属性名，nodeValue值是属性值.
获取属性节点的方法：getAttributeNode()

文本节点

文本节点text代表网页中的HTML标签内容。
文本节点的节点类型nodeType值是3，节点名称nodeName值是’#text’，nodeValue值是标签内容值.

没有直接的获取方法：可以通过下列属性来获取：

节点的关系

 fristChild :返回当前节点的首个子节点
lastChild:返回当前节点最后一个子节点
 nextSibling:返回同一层级中指定节点之后紧跟着的节点
previousSibling:返回同一层级中指定节点之前紧跟着的节点
parentNode:返回当前节点的父节点
childNodes:元素节点的所有子节点的集合

  1. nodeName : 节点的名称

    • 元素节点的 nodeName 与标签名相同

    • 属性节点的 nodeName 是属性的名称

    • 文本节点的 nodeName 永远是 #text

  2. nodeValue ：节点的值

    • 元素节点的 nodeValue 是 undefined 或 null
    • 文本节点的 nodeValue 是文本自身
    • 属性节点的 nodeValue 是属性的值

  3. nodeType ：节点的类型

    • 元素节点 1
    • 属性节点 2
    • 文本节点 3
    • 注释节点 8
    • 文档节点 9

获取元素内容的属性

innerHTML 用于设置或者获取开始和结束标签之间的HTML
innerHTML和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者是重新载入整个HTML的文档页面

操作元素的属性：

利用DOM操作

元素，完成属性的添加，获取，删除，和遍历的操作。

样式操作

  • 使用style方式设置的样式显示在标签行内
    var box = document.getElementById(‘box’);
    box.style.width = ‘100px’;
    box.style.height = ‘100px’;
    box.style.backgroundColor = ‘red’;

  • 注意：通过样式属性设置宽高、位置的属性类型是字符串，需要加上px常见的style样式属性：
    background
    backgroundColor
    fontSize
    backgroundImage
    border
    …

    自定义属性操作

  • getAttribute(“自定义属性的名字”) 获取自定义属性的值

  • setAttribute(“属性的名字”,“属性的值”); 设置自定义属性的值

  • removeAttribute(“属性的名字”) 移除自定义属性

类名操作
  • 修改标签的className属性相当于直接修改标签的类名
    var box = document.getElementById(‘box’);
    box.className = ‘clearfix’;

属性操作

非表单元素的属性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

表单元素属性

  • value 用于大部分表单元素的内容获取
  • type 可以获取input标签的类型(输入框或复选框等)
  • disabled 禁用属性
  • checked 复选框选中属性
  • selected 下拉菜单选中属性

*节点.属性; 获取元素内置属性（元素本身自带的属性）*
*节点.getAttribute('属性'); 主要获得自定义的属性，也就是程序员自定义的属性*
**节点.属性 = '值';** 设置内置属性值
**节点.setAttribute('属性','值');** 主要针对自定义属性
节点.removeAttribute("属性名")；** 移除指定的属性
**节点.removeAttribute("属性名")；** 移除指定的属性

节点关系

DOM节点（当前标签和同级、父级、子级…之间的关系）

  • 根节点
  • 父节点
  • 兄弟节点
  • 子节点

节点属性

通过document.getElementById()方法获取的对象统称为Element对象(元素对象）

DOM节点类型

DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。
它的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。
浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。
DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。

一般地，节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也不相同
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

代码列举

tagName (了解)

tagName 属性返回元素的标签名。在 HTML 中，tagName 属性的返回值始终是大写的。

   document.getElementById("demo").tagName;

对元素内容的操作

对象.innerHTML 设置或获取对象起始和结束标签内的内容（识别标签）
对象.innerText 设置或获取对象起始和结束标签内的文字内容（不识别标签）
对象.value 仅作用于表单（input textarea）

文档的写入

innerHTML和document.write()方法是向文档输出写内容。
<html>
<body>

  <script type="text/javascript">
      document.write("Hello World!");
  </script>

</body>
</html>

document.writeln()
writeln() 方法与 write() 方法作用相同，外加可在每个表达式后写一个换行符

<html>
<body>
<pre>
<script>
document.write("Hello World!");
document.write("Have a nice day!");
</script>
</pre>


<p>注意writeln()方法在每个语句后面新增一行：</p>

<pre>
<script>
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
</pre>
</body>
</html>

给元素节点常用的属性和方法

给节点添加一个类 node.className = “”

第一个子节点：node.fristChild
最后一个子节点 node.lastChild
下一个兄弟节点 node.nextSibling
上一个兄弟节点 node.previousSibling

给节点设置html内容 node.innerHTML = “”
给节点设置选中状态(单选框) node.checked = true;
给节点设置不选中状态(多选框) node.checked = true;

创建一个节点 document.createElement();
添加一个子节点 父节点.createElement()
插入一个新的节点：父节点.insertBefore(子节点,父节点的fristChild);

节点操作方法

createElement():元素节点的创建

appendChild():指定元素在尾部追加一个子元素
语法：指定元素.appendChild(要添加的元素);

  var obox=document.getElementById("box");
  var  newLi=document.createElement("li");
  newLi.innerHTML="新增列表项";
  obox.appendChild(newLi);

insertBefore():此方法可以在指定子节点的前面插入一个新的节点。
指定元素.insertBefore(新元素,指定子节点)

  var obox=document.getElementById("box");
  var lis=document.getElementsByTagName("li");
  var  insertedLi=document.createElement("li");
  insertedLi.innerHTML="插入一行";
  obox.insertBefore(insertedLi,lis[1]);

获取元素节点的方法

firstElementChild：获取指定元素下第一个子元素节点
lastElementChild：此属性可以返回指定元素的最后一个子元素节点
nextElementSibling：返回当前节点的下一个兄弟元素节点
previousElementSibling：获取节点紧邻的上一个同级元素节点
children：指定元素的子元素集合，只包括元素节点，不包括文本节点等其它节点

DOM操作

1、点击按钮 产生div
2、点击按钮生成大小不同效果不同的div

标签
dom
javascript
html代码
自定义属性
html语言
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!