dom(文档对象模型)

文档结构

文档加载,转换为文档对象模型。将所有的标签,文本,属性转换为dom节点,形成一棵dom树。

标签,元素,节点:

<a>

标签开始到结束的部分

标签,文本,属性

节点的访问

//1.获取p节点
var oP = document.getElementById("p1"); //通过id获取
//2.nodelist:节点列表 node:节点
var aInput = document.getElementsByName("user"); //通过name获取
//console.log(aInput[1]);
//3.通过标签名称获取节点
aInput = document.getElementsByTagName("input");
//4.class名称
//document.getElementsByClassName();
console.log(aInput[0]);

节点操作

内容操作

//内容区的值的获取和修改
var val = oP.innerHTML;
//覆盖p标签内容值,支持使用标签
oP.innerHTML = "<span>bbb</span>"; //内容区的值的获取和修改
var val = oP.innerText;
//不能识别标签
oP.innerText = "<span>bbb</span>";

修改属性(class的修改例外)

document.getElementsByTagName("img")[0].src="img/down.png";
//修改颜色为绿色
oP.className="green";

修改样式

oP.style.color="red";
oP.style.fontSize="12px";

节点之间的访问

//p节点有哪些子节点列表
var aChilds = oP.childNodes;
//几个 3 长度
//console.log(aChilds.length);
//第一个子节点
var fChild = oP.firstChild;
//获取最后一个子节点
var lChild = oP.lastChild; //2. 获取父节点
var oSpan = document.getElementsByTagName("span")[0];
//2.1 1
var p = oSpan.parentNode; //3.获取兄弟节点
oSpan = document.getElementsByTagName("span")[0];
//上一个节点
var pre = oSpan.previousSibling;
//上一个元素节点
pre = oSpan.previousElementSibling;
//下一个节点
var nex = oSpan.nextSibling;
//下一个元素节点
nex = oSpan.nextElementSibling;

节点的添加

//追加一个span节点,hello
//1.获取p节点
var oP = document.getElementsByTagName("p")[0];
//2.创建span节点
var oSpan = document.createElement("span");
//3.创建文本节点
var oTxt = document.createTextNode("hello");
//4.添加文本节点到span节点
oSpan.appendChild(oTxt); //<span>hello</span>
//5.追加span节点到p节点
oP.appendChild(oSpan); //覆盖
document.getElementsByTagName("p")[0]
.innerHTML="<span>hello</span>";

节点的删除

//2.删除子节点
//2.1 获取span节点
var oSpan = document.getElementsByTagName("span")[0];
//2.2 获取父节点
var oP = oSpan.parentNode;
//2.3 从父节点中删除
oP.removeChild(oSpan);

插入子节点

//1.创建span节点
var oSpan = document.createElement("span");
//创建属性节点
var idAttr = document.createAttribute("id");
idAttr.value = "p1";
oSpan.setAttributeNode(idAttr);
//设置属性
/* oSpan.setAttribute("id","span1");
//获取属性
console.log(oSpan.getAttribute("id"));*/
//2.创建文本节点
var oTxt = document.createTextNode("hello");
//3.添加文本节点到span节点
oSpan.appendChild(oTxt); //4.获取参考节点
var oldSpan = document.getElementsByTagName("span")[0];
//5.获取p节点
var oP = oldSpan.parentNode;
oP.insertBefore(oSpan,oldSpan);

Day4 JavaScript(二)dom操作的更多相关文章

  1. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  2. Python之路day13 web 前端(JavaScript,DOM操作)

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  3. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  4. 第一百一十五节,JavaScript,DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  5. JavaScript:DOM操作

    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...

  6. JavaScript之DOM操作,事件操作,节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  7. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  8. HTML JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  9. JavaScript的DOM操作(2)

    补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...

  10. (转)Javascript的DOM操作 - 性能优化

    转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维 ...

随机推荐

  1. mysql information_schema介绍

    mysql information_schema介绍 一.information_schema是什么 information_schema是MySQL自带的一个信息数据库,其保存着关于MySQL服务器 ...

  2. [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  3. cookie封装函数与使用方法(转)

    函数封装: var Cookie = function(name, value, options) { // 如果第二个参数存在 if (typeof value != 'undefined') { ...

  4. JS 面试题 实践一

    1.完成 extname 函数,它会接受一个文件名作为参数,你需要返回它的扩展名. 例如,输入 emoji.png,返回 .png. const extname = (filename) => ...

  5. 什么是Github?

    初识Github GitHub 是程序员的必备技能 1.什么是Github? 确切的说 GitHub 是一家公司,位于旧金山,由 Chris Wanstrath, PJ Hyett 与 Tom Pre ...

  6. Android设置日期DatePickerDialog

    设置日期DatePickerDialog package com.example.testview; import java.util.Calendar; import java.util.Date; ...

  7. 通过html导出PDF如何分页

    每页一个DIV,加上样式page-break-inside:avoid; 即可分页了 .pdfpage{page-break-inside:avoid;} <div class="pd ...

  8. hue简单介绍

    hue定义: HUE=Hadoop User Experience 个人理解:可视图的webui界面,方便大数据技术之间的CRUD操作. 官方定义:Hue是一个能够与Apache Hadoop交互的W ...

  9. spring boot(14)-pom.xml配置

    继承spring-boot-starter-parent 要成为一个spring boot项目,首先就必须在pom.xml中继承spring-boot-starter-parent,同时指定其版本 & ...

  10. wopihost

    项目介绍 基于wopi协议开发的WopiHost, 支持word, excel,ppt(仅支持预览)等文档的预览和编辑. 运行环境 需要安装Office online 2016才可以使用,基于jdk ...