Day4 JavaScript(二)dom操作
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操作的更多相关文章
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Python之路day13 web 前端(JavaScript,DOM操作)
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- 第一百一十五节,JavaScript,DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- JavaScript:DOM操作
一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...
- JavaScript之DOM操作,事件操作,节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
- Javascript的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- HTML JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- JavaScript的DOM操作(2)
补充: 回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...
- (转)Javascript的DOM操作 - 性能优化
转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维 ...
随机推荐
- mysql information_schema介绍
mysql information_schema介绍 一.information_schema是什么 information_schema是MySQL自带的一个信息数据库,其保存着关于MySQL服务器 ...
- [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
- cookie封装函数与使用方法(转)
函数封装: var Cookie = function(name, value, options) { // 如果第二个参数存在 if (typeof value != 'undefined') { ...
- JS 面试题 实践一
1.完成 extname 函数,它会接受一个文件名作为参数,你需要返回它的扩展名. 例如,输入 emoji.png,返回 .png. const extname = (filename) => ...
- 什么是Github?
初识Github GitHub 是程序员的必备技能 1.什么是Github? 确切的说 GitHub 是一家公司,位于旧金山,由 Chris Wanstrath, PJ Hyett 与 Tom Pre ...
- Android设置日期DatePickerDialog
设置日期DatePickerDialog package com.example.testview; import java.util.Calendar; import java.util.Date; ...
- 通过html导出PDF如何分页
每页一个DIV,加上样式page-break-inside:avoid; 即可分页了 .pdfpage{page-break-inside:avoid;} <div class="pd ...
- hue简单介绍
hue定义: HUE=Hadoop User Experience 个人理解:可视图的webui界面,方便大数据技术之间的CRUD操作. 官方定义:Hue是一个能够与Apache Hadoop交互的W ...
- spring boot(14)-pom.xml配置
继承spring-boot-starter-parent 要成为一个spring boot项目,首先就必须在pom.xml中继承spring-boot-starter-parent,同时指定其版本 & ...
- wopihost
项目介绍 基于wopi协议开发的WopiHost, 支持word, excel,ppt(仅支持预览)等文档的预览和编辑. 运行环境 需要安装Office online 2016才可以使用,基于jdk ...