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的一些方法属性: 大概这些就是常用的,下面具体聊聊. 节点 ...
随机推荐
- [Java并发编程(二)] 线程池 FixedThreadPool、CachedThreadPool、ForkJoinPool?为后台任务选择合适的 Java executors
[Java并发编程(二)] 线程池 FixedThreadPool.CachedThreadPool.ForkJoinPool?为后台任务选择合适的 Java executors ... 摘要 Jav ...
- VM虚拟机下安装CentOS_6.5_x64
在开始Linux的学习之前,我们必须要有一个实验环境.这里我选择了安装CentOS-6.5-x86_64的Minimal版本,大家也可以选择安装其他的Linux发行版.选择CentOS主要还是因为它比 ...
- 电子商务(电销)平台中订单模块(Order)数据库设计明细(转)
以下是自己在电子商务系统设计中的订单模块的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 订单表 (order)|-- 自动编号(order_id, 自增长主键)|-- 订单单号( ...
- JDK 自带的观察者模式源码分析以及和自定义实现的取舍
前言 总的结论就是:不推荐使用JDK自带的观察者API,而是自定义实现,但是可以借鉴其好的思想. java.util.Observer 接口源码分析 该接口十分简单,是各个观察者需要实现的接口 pac ...
- Golang查缺补漏(一)
Go语言高级编程(Advanced Go Programming) Go语言高级编程(Advanced Go Programming) golang都是传值,与其他语言不同的是数组作为参数时,也是传值 ...
- Ubuntu下安装sbt
参考 ubuntu14 手动安装sbt 1.下载sbt通用平台压缩包:sbt-0.13.5.tgz http://www.scala-sbt.org/download.html 2.建立目录,解压文 ...
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...
- 按位与(&)和按位或(|)
/** * 按位与 : & * 按位或 : | */ public class Demo { /** * 按位与: 为什么(5 & 9)的值等于1 * 按位或: 为什么(5 | 9)的 ...
- Pointer-network的tensorflow实现-1
pointer-network是最近seq2seq比较火的一个分支,在基于深度学习的阅读理解,摘要系统中都被广泛应用. 感兴趣的可以阅读原paper 推荐阅读 https://medium.com/@ ...
- mysql按位的索引判断位的值
DELIMITER $$ DROP FUNCTION IF EXISTS `value_of_bit_index`$$/*计算数字的某个位的值*/CREATE FUNCTION `value_of_b ...