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和应用的更多相关文章

  1. 前端学习记录之Javascript-DOM

    简介 为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等.然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了 ...

  2. javascript-DOM学习

    javascript-DOM学习 DOM document(html) object modle document对象(DOM核心对象) dom能用来干什么? 对html元素的样式(颜色.大小.位置等 ...

  3. JavaScriptDOM编程学习笔记(二)图片库案例

    <JavascriptDOM编程艺术>提供一个图片库的demo,主要讲解如何更好的使用JavaScript在网页中,跟随作者的思路来分析一下这个案例 首先需求是将图片发布到网上,但是如果发 ...

  4. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  5. web前端学习(四)JavaScript学习笔记部分(4)-- JavaScriptDOM对象

    1.Javascript-DOM简介 1.1.HTML DOM 1.2.DOM操作HTML 1.2.1.JavaScript能够改变页面中的所有HTML元素 1.2.2.JavaScript能够改变页 ...

  6. Javascript-DOM总结

    DOM总结 1.DOM的含义     DOM是Document Object Model文档对象模型的缩写.根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的 ...

  7. 01.总结的javascript-DOM/BOM集合

    javascript总结: javascript 主要包括三个部分:1.DOM; 2.BOM; 3.ECMAscript 一.DOM(对象文档模型) 1.几个重要概念: 1)dom节点:元素,属性,文 ...

  8. JavaScript--DOM修改元素的属性

    一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...

  9. JavaScript---DOM文档

    DOM文档中,每个节点都有一些重要的属性: 最重要的是nodeType,它描述该节点是什么---元素(element).属性(attribute).注释(comment).文本(text)或者其他几种 ...

  10. 你不知道的JavaScript--DOM基础详解2

    转载:http://blog.csdn.net/i10630226/article/details/49785165 先上几张图简要看看DOM的一些方法属性: 大概这些就是常用的,下面具体聊聊. 节点 ...

随机推荐

  1. VBA二次学习笔记(1)——文件操作

    说明(2018-9-1 11:20:46): 1. 上班三个月了,累的一逼,真的是钱少事多离家远,每天早上六点起,晚上八点回.哎,少壮不努力啊! 2. 三个月没写博客了,上一篇已经是5.29的了,真的 ...

  2. python实现类似于Matlab中的magic函数

    参考这篇文章的代码封装了一个类似Matlab中的magic函数,用来生成魔方矩阵. #!/usr/bin/env python # -*- coding: utf-8 -*- import numpy ...

  3. Web API 异常处理

    Web Api的ExceptionFilter只能截获并处理Action执行过程中发生的异常,在Action执行过程之外如果出现异常,ExceptionFilter是无能为力的. 这些异常包括: 1. ...

  4. [原创]电路仿真设计multisim 14安装,破解,汉化教程

    硬件工程师开发产品.利用multisim 等辅助软件进行设计仿真可以有效提高开发效率,减少设计弯路. 本文博乐就带大家一起进行multisim 14安装破解汉化. 首先下载multisim 14安装文 ...

  5. Windows Server 2003下DHCP服务器的安装与简单配置图文教程

    在前面的内容中,我们提到了DHCP这个词,为什么要用到DHCP呢,企业里如果有100台计算机,那样,我们一台台的进行配置Ip,我想还是可以的,因为少嘛,如果成千上万台,那我们也去一台台的配置,我相信这 ...

  6. Spring AOP @AspectJ进阶

    @AspectJ可以使用切点函数定义切点,我们还可以使用逻辑运算符对切点进行复核运算得到复合的切点,为了在切面中重用切点,我们还可以对切点进行命名,以便在其他的地方引用定义过的切点.当一个连接点匹配多 ...

  7. 11.9luffycity(4)

    2018-11-9 17:57:09 明天开始自己独立写luffy部分表的接口, 越努力,越幸运!永远不要高估自己! 明天后天先不想下看视频,把接口做完,然后整理一下笔记,温故而习之,可以为师啊! 知 ...

  8. 24、设计模式、webpack

    利用静态属性:长驻内存 (一) 单例模式 概念:单个实例,只有一个对象,多次创建,返回同一个对象. 单例模式的核心:==确保只有一个实例==,并提供全局访问. //利用了静态属性:长驻内存 funct ...

  9. Ubuntu 离线安装Mysql

    一.安装包 先从网络上,下载Mysql安装包,复制到U盘 下载地址:https://dev.mysql.com/downloads/mysql/ 二.挂载U盘 2.1查看分区 先输入命令  cat   ...

  10. windows服务安装 System.IO.FileLoadException

    报错如下: System.IO.FileLoadException: 未能加载文件或程序集“file:///D:\WindowsService\bin\Debug\WindowsService.exe ...