javascript与DOM节点的结合使用】的更多相关文章

要向HTML DOM添加新元素,必须首先创建元素(元素节点),然后将其附加到现有元素. <!DOCTYPE html> <html> <meta charset="utf-8"> <title>教程(jc2182.com)</title> <body> <div id="div1"> <p id ="p1">这是一个段落.</p> <…
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能.…
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点.然后操作的时候修改的是该元素的属性. 3.DOM树 从图看出,HTML中一切都是节点: 元素节点:HTML标签 文本节点:标签中的文字 属性节点:标签中的属性 整个文档就是一个一个文档节点.所有的…
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test</div><script language="javascript">alert(document.getElementById("myid").innerHTML);</script></body></html&…
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能.微软在网页技术上加入了不少专属事物,既有VBScript.ActiveX…
HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉,没错,就像JS中一切都是对象一样,HTML文档中一切都是节点.   我们可以使用各种访问节点的方法,对任意一个节点进行增删改查等等操作.从而达到对整个页面的各种操作. 增: 如果要向HTML添加一个元素,需要先创建一个元素(元素节点),然后再将其追加到已有的元素上. 创建元素节点newNode:…
文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 ==一般情况下,每个元素只有一个文本节点== ==但是在某些情况下也会有多个节点,例子如下== //创建父节点 var element=document.createElement("div"); element.className="message"; //添加第一个文本…
1.使用appendChild,把一个子节点添加到父节点的最后一个子节点,.innerText插入的是内容 HTML <!-- HTML结构 --> <p id="js">react</p> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p i…
a.appendChild(b)  追加标签 a是b的父级,将b追加到a中 追加标签  a.insertBefore(b,c);  a是b和c的父级,在c前面插入b 删除标签  a.removeClild(b)  a是b的父级,删除b标签 案例: (1)html <input type="text" id="txt"> <button id="btn">按钮</button> <div id="…
通过element.style.xxx设置或者读取的xxx样式属性,都是属于行间样式(<p style="color=red"></p>),并不是 使用link的外部css文件 或者 在<style></style>标签中定义的样式 样式优先级: * < tagName < class < id < 行间(行间样式就是写在标签内) 下面这个代码中 <html> <head> <styl…
常用的方法有 document.getElementById("id"); document.getElementsByTagName('tagName'); document.getElementsByName('inputName'); document.getElementByClassName('className'); 其中只有通过id才能保证获得是一个元素.其他的方法获得的都是一个集合(collection),可以使用数组的访问方式访问. 下面是简单的实例: <!DO…
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 H…
<html> <head> <title>DOM对象</title> </head><body><div >DOM对象</div> 1.DOM节点</br> <script type="text/javascript"> var root = document.documentElement; // var oHead = root.firstChild; //var…
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<…
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document 二.nodeV…
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户名+留言发布到下方的留言列表区域. 2.页面样式设计 样式很简单,就不上代码了. 3.使用JS实现留言功能 代码: function getMessage(){ var btn = document.getElementById("btn1"); //绑定发布按钮 var message…
一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值,....);②事件调用方式:再HTMl标签中,使用事件名="函数名()"<button ondblclick="saySth('按钮','yellow')">点击按钮,打印内容</button> 3.函数的注意事项:①函数名必须符合小驼峰法则!!…
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改DOM对象的那些属性请参考下面代码片段和效果. 1.element.innerHTML 设置或返回元素的内容 2.element.setAttribute()设置或者改变指定属性并指定值. 3.element.setAttributeNode() 设置或改变属性节点  效果 4.element.sty…
  在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档  9. 一.添加和删除节点(HTML 元素) 1.创建节点 1)创建该元素(元素节点): 2)向一个已存在的元素追加该元素. 语法:appendChild(newnode) eg: 1 <div id="div1"…
Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实非常多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的. 说好一大堆废话之后.我最后再说一遍.管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是添加直接点的DOM节点 2 totalNum: 为100000(…
创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里. 2.创建文本节点createTextNode()var value = document.createTextNode(“text”);创建一个文本节点,常用来往元素节点里添加内容,也不会自动添加到文档里.很多人知道innerHTML,不知道这个方法,这个添加的是静态文本,如果插入的内…
DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推荐标准. IE中的所有DOM对象都是以COM对象的形式实现. 节点层次 DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中的不同信息及标记.每个节点都有各自的属性,数据和方法,同时也与其他节点存在联系.所有页面标记表现为以一个特定节点为…
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9. 一.添加和删除节点(HTML 元素) 1.创建节点 1)创建该元素(元素节点): 2)向一个已存在的元素追加该元素. 语法:appendChild(newnode) eg: <div id="div1">…
1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸如XML和HTML文档的标准.DOM是一个使程序和脚本有能力动态地访问和更新文档的内容,结构以及样式的平台和语言中立的接口. 在文档中一切皆对象,比如 html,body,div,p等等都看做对象,那么我们如何来点击某个盒子让他变色呢? DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档…
节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本节点 nodeType  为3 (文本节点包含文字,空格和换行) 一般我们开发操作的是元素节点 节点层级 父级节点 node.parentNode 返回离自己最近的那个父亲 没有父亲,就返回null <body> <div class="demo"> <div…
获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值 <html> <head&g…
获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取. 2). firstChild 属性获取第一个子节点 3). lastChild 属性获取最后一个子节点 <html> <head> <meta http-equiv="Content-Type" co…
读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值 1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Doc…
Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字符串 var date_obj2 = new Date("2019/01/21 15:14"); var date_obj3 = new Date("2019 01 21 15:14"); alert(date_obj2.toLocaleString()); alert…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h2>JavaScript HTML DOM!</h2> <p>Hello World!</p> <p>Hello Runoob!&…