JavaScriptDom和应用
DOM编程
DOM是Document Object Model文档对象模型
DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件
DOM简介
D:文档 – html 文档 或 xml 文档
O:对象 – document 对象的属性和方法
M:模型
学习这个DOM主要学习几个内容 Document(Element/Text/Attribute)
*由结构图中我们可以看到,整个文档就是一个文档节点。 Document
* 而每一个HTML标签都是一个元素节点。 Element
* 标签中的文字则是文本节点。 Text
* 标签的属性是属性节点。 Attribute
* 一切都是节点…… Node
获取dom的三种方式
第一种方式:在元素上添加一个id,然后通过getElementById拿到这个元素
var username = document.getElementById("username");
console.debug(username) ; 特点:拿到的是唯一的一个元素!
第二种方式:在元素加一个name,然后通过getElementsByName拿到这一组元素
var likes = document.getElementsByName("likes");
console.debug(likes);
for(var i=0;i<likes.length;i++){
console.debug(likes[i]);特点:可以根据名称(元素上的name属性)拿到一个节点数组
第三种方式: 通过元素的标签名拿到一组元素getElementsByTagName
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
console.debug(inputs[i]);特点:可以根据名称(标签的名称)拿到一个节点数组
node常用属性与方法
拿到dom的根有两种方式;
①方式一document.body ->body标签
console.debug(document.body);
console.debug(document.body.clientWidth);//页面的宽
console.debug(document.body.clientHeight);//由body里面的内容决定高度
方式二document.documentElement
注意的区别:
document.documentElement.clientHeight:它拿到的是整个窗口高度
document.body.clientHeight:拿到内容的高度
node节点的属性与方法总表 (js里面一切皆节点,现在我们来学习这个节点的属性和方法)
|
属性名称 |
名称 |
返回类型 |
节点列表 |
parentNode |
父节点 |
Node |
firstChild |
列表中的第一个节点 |
Node |
|
lastChild |
列表中的最后一个节点 |
Node |
|
childNodes |
所有子节点的列表 |
NodeList |
|
previousSibling |
上一个兄弟节点 |
Node |
|
nextSibling |
下一个兄弟节点 |
Node |
|
节点信息 |
nodeName |
节点名称 |
String |
nodeValue |
节点值 |
String |
|
nodeType |
节点类型 |
Number |
|
元素属性 |
attributes |
一个元素的属性对象 |
NamedNodeMap |
方法 |
hasChildNodes() |
当childNodes包含一个或多个节点时,返回真 |
Boolean |
appendChild(node) |
将node添加到childNodes的末尾 |
Node |
|
removeChild(node) |
从childNodes中删除node |
Node |
|
replaceChild(newnode, oldnode) |
将childNodes中的oldnode替换成newnode |
Node |
|
insertBefore(newnode, refnode) |
在childNodes中的refnode之前插入newnode |
Node |
//parentNode父节点
var eyewa = document.getElementById("eyewa");
console.debug(eyewa.parentNode);
firstChild: 拿到第一个孩子
//firstChild 找到我的第一个儿子
var wawa = document.getElementById("wawa");
console.debug(wawa.firstChild);//注意空格换行也是一个元素
lastChild: 拿到最后一个孩子
var wawa = document.getElementById("wawa");
console.debug(wawa.lastChild);//注意最后一个空格换行也是一个元素
childNodes: 拿到孩子们
//childNodes 所以子节点的列表(如果有空格,就包含空格)
var wawa = document.getElementById("wawa");
console.debug(wawa.childNodes);
previousSibling: 上一个兄弟
//previousSibling: 上一个兄弟
var eyewa = document.getElementById("eyewa");
console.debug(eyewa.previousSibling);//眼镜娃上一个兄弟 大力娃
//nextSibling: 下一个兄弟
var eyewa = document.getElementById("eyewa");
console.debug(eyewa.nextSibling);//眼镜娃下一个兄弟 金刚娃
不同元素的节点信息
不同的节点类型包含 Element,Attribute,Text
nodeName,nodeValue,nodeType这三个也是节点的属性,在不同的节点中,这3个属性的值不一样;
//①Element 的 nodeName,nodeValue,nodeyType
var wawa = document.getElementById("wawa");
console.debug(wawa.nodeName);//UL
console.debug(wawa.nodeValue);//null 什么值都没有
console.debug(wawa.nodeType);//1
//②Attribute 的 nodeName,nodeValue,nodeyType
var wawa = document.getElementById("wawa");
var attr = wawa.getAttributeNode("id");
console.debug(attr.nodeName);//id
console.debug(attr.nodeValue);//wawa (等于id="wawa")
console.debug(attr.nodeType);//2
Text的nodeName,nodeValue,nodeType
var eyewa = document.getElementById("eyewa");
var textNode = eyewa.firstChild;
console.debug(textNode.nodeName);//#text 不管它 就是表示text
console.debug(textNode.nodeValue);//眼镜娃
console.debug(textNode.nodeType);//3
nodeName |
nodeValue |
nodeType |
|
Element(元素) |
标签名称(LI) |
null |
1 |
Attribute(属性) |
属性的名称(id) |
属性的值 |
2 |
Text(文本) |
#text |
文本的内容 |
3 |
操作元素方法
hasChildNodes()--》当childNodes包含一个或多个节点时,返回真
appendChild(node)--》添加元素
removeChild(node)--》删除元素
replaceChild(newnode, oldnode)--》修改元素
insertBefore(newnode, refnode)--》插入元素
createElement(“元素名称”)--》创建元素
① 加元素 appendChild(node)从内存中创建一个标签,追加到页面上
var li = document.createElement("li");
li.innerHTML = "隐身娃";
//拿到父亲节点 ul
var wawa = document.getElementById("wawa");
//把li 添加ul里面
wawa.appendChild(li);
将一个已有的元素添加到另外一个元素里面
//拿到已有的元素
var maer = document.getElementById("maer");
//拿到需要添加的元素
var westRun = document.getElementById("westRun");
westRun.appendChild(maer);
将一个已有的节点进行替换 --》修改元素:replaceChild()
var newMonkey = document.createElement("h3");
newMonkey.innerHTML = "六小锋";
var oldMonkey = document.getElementById("sun");
var westRun = document.getElementById("westRun");
westRun.replaceChild(newMonkey,oldMonkey);
删除元素:removeChild()
noeyewa.parentNode.removeChild(noeyewa);
插入一个节点 insetBefore(new,old)
添加文字
nnerText和innerHTML区别:
innerText:会把值原封不动显示(火狐低版本中不支持)
innerHTML:会将值解析成HTML的格式显示
如果我元素上有的属性,都可以通过元素对象.属性名 或者 元素对象["属性名"]来获取
//修改或者替换属性
var myimg = document.getElementById("myimg");
myimg.title="姚明";
myimg.src="../img/b.png";
JavaScriptDom和应用的更多相关文章
- 前端学习记录之Javascript-DOM
简介 为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等.然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了 ...
- javascript-DOM学习
javascript-DOM学习 DOM document(html) object modle document对象(DOM核心对象) dom能用来干什么? 对html元素的样式(颜色.大小.位置等 ...
- JavaScriptDOM编程学习笔记(二)图片库案例
<JavascriptDOM编程艺术>提供一个图片库的demo,主要讲解如何更好的使用JavaScript在网页中,跟随作者的思路来分析一下这个案例 首先需求是将图片发布到网上,但是如果发 ...
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
- web前端学习(四)JavaScript学习笔记部分(4)-- JavaScriptDOM对象
1.Javascript-DOM简介 1.1.HTML DOM 1.2.DOM操作HTML 1.2.1.JavaScript能够改变页面中的所有HTML元素 1.2.2.JavaScript能够改变页 ...
- Javascript-DOM总结
DOM总结 1.DOM的含义 DOM是Document Object Model文档对象模型的缩写.根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的 ...
- 01.总结的javascript-DOM/BOM集合
javascript总结: javascript 主要包括三个部分:1.DOM; 2.BOM; 3.ECMAscript 一.DOM(对象文档模型) 1.几个重要概念: 1)dom节点:元素,属性,文 ...
- JavaScript--DOM修改元素的属性
一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...
- JavaScript---DOM文档
DOM文档中,每个节点都有一些重要的属性: 最重要的是nodeType,它描述该节点是什么---元素(element).属性(attribute).注释(comment).文本(text)或者其他几种 ...
- 你不知道的JavaScript--DOM基础详解2
转载:http://blog.csdn.net/i10630226/article/details/49785165 先上几张图简要看看DOM的一些方法属性: 大概这些就是常用的,下面具体聊聊. 节点 ...
随机推荐
- 【资料下载区】【iCore4相关代码、资料下载地址】更新日期2018/02/24
[iCore4相关文档][更新中...] iCore4原理图(PDF)下载iCore4引脚注释(PDF)下载iCore4机械尺寸(PDF)下载 [iCore4相关例程代码][ARM] DEMO测试程序 ...
- NO.5 算法测试(词条统计)
一.安装Eclipse 下载Eclipse,解压安装,例如安装到/usr/local,即/usr/local/eclipse 4.3.1版本下载地址:http://pan.baidu.com/s/1 ...
- Html.Partial,Html.RenderPartial Html.Action,Html.RenderAction区别
@Html.Partial,@Html.RenderPartial 这两者的共同点都是在视图中去调用另外一个视图,区别是 Html.Partial 有返回值 ( MvcHtmlStrin ...
- 加速Windows 2003关机速度的设置方法
indows 2003是目前版本最高的Windows操作系统,虽然其功能比历史上任何一个版都要强,但是其关机操作却给大家带来了一些小麻烦.其实我们完全可以解除这些麻烦,让关机加速 一.关闭关机事件 ...
- 一次基于Vue.Js的用户体验优化 (vue drag)
一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多的经验和体验.随着项目进行和优化改版,无 ...
- Factory——工厂方法
一.定义 GOF上对工厂方法的意图如此描述:定义一个用于创建对象的接口,让子类决定实例化哪个类.Factory Method使一个类的实例化延迟到其子类. 作为类的开发者,我们通常会在类中提供构造器方 ...
- [原]openstack-kilo--issue(二十三)虚拟机状态错误power_status为shutdonw或者vm_status为error
问题点:虚拟机由于存储不足出现了错误标识 主要显示为状态错误: 1) vm_status 显示为 error 2) power_status 显示为 shutdown 解决方案: 更改表 nova. ...
- node.js用logio实时监控log
http://logio.org/ 1.先装好node.js $ yum install nodejs 2.安装log.io $sudo npm install -g log.io --user &q ...
- 如何在spring-boot web项目中启用swagger
swagger的三个项目及其作用 我们打开swagger的官网,会发现有三个swagger相关的项目,它们分别是 swagger-editor 作用是通过写代码,生成文档描述(一个json文件或其他格 ...
- mac npm编译的时候,一直报 node 镜像找不到
目前我所知的方法就是卸载.重装node,或者是升级node 卸载: brew uninstall node 安装: brew install node 升级: brew upgrade node