嗯，大过年的上次更新应该还是在，大年30前一天，说好的一天更一篇，感觉食言了，虽然没有更，但是，每天还是坚持在学习的，所以今天的任务就是把这几天学的都发上来。
博客，我觉得不仅仅是交流知识的地方，我宁愿把它写成我的生活日记。有差的，欢迎拍砖。
好了，进入正题吧。
DOM操作，我觉得可以归结成三个，一个标签节点，一个属性节点，一个文本节点。
这里的
li 就是标签节点；
alt就是属性节点；
第一个是文本节点（不是alt里面的）；
接下来我将分别用两个例子来解释，这三个点。
我先把html放上来：
<body>
<ul>
<li alt="第一个">第一个</li>
<li>第二个<br />换行了</li>
<li>第三个</li>
</ul>
<!--<uL id="father"><li>第四个</li><li>第五个</li><li id="tt">第六个</li></uL> 这里我把叠起来，跟下面等会的操作是有区别的-->
<uL id="father">
<li>第四个</li>
<li>第五个</li>
<li id="tt">第六个</li>
</uL>
<button id="dd">点击获取第六个内容</button>
</body>
标签节点：
window.onload = function(){
var a = document.getElementById("dd");/*这里就是获取标签节点，获取button按钮，我这里是通过Id，还有其他很多方式，注意一点其他的是类数组*/
a.onclick = function(){/*点击事件*/
var d = document.getElementById("tt").childNodes[0].nodeValue;/*得到含有id=“tt”的标签,然后他的字节点，看html，只有“第六个”这几个字，这就是文本节点，nodeValue这个就是其所含的内容*/
alert(d);/*输出，注意我这里文本节点稍微带了一下*/
}
var por = document.getElementsByTagName("li")/*这是通过标签选择器，得到li标签数组，赋值给por*/
alert(por.length+" "+por[0].tagName+" "+por[1].childNodes[1].nodeName);/*输出，得到，por[]数组长度，第一个li标签的名字，第二个li的文本节点的内容*/
属性节点,文本节点:
/*得到节点*/
var first = document.getElementsByTagName("li")[0];/*标签选择器得到第一个li标签*/
console.log(first.getAttribute("alt"));/*getAttribute（）方法就是得到目标对象的（里面属性）的值*/ /*创建节点*/
var Pcreate = document.createElement("p");/*创建一个p标签*/
var Textcreate = document.createTextNode("我创建了文本节点");/*createTextNode创建文本节点，并赋予内容*/
var Attcreate = document.createAttribute("style");/*createAttribute创建属性,创建的属性是style*/
Attcreate.value = "color:red";/*赋予属性值*/
Pcreate.setAttributeNode(Attcreate);/*setAttributeNode,把创建的属性节点放入创建的p标签里*/
Pcreate.appendChild(Textcreate);/*appendchild把创建的文本节点放入p标签里*/
document.body.appendChild(Pcreate);/*然后把p标签放入到body*/
js_DOM操作的更多相关文章
-
JS_DOM操作之常用事件
1 - onload 事件:加载完成后立即执行 <!DOCTYPE html> <html lang="en"> <head> <meta ...
-
JS_DOM操作之操作标签
<标签名 属性1="属性值1" 属性2="属性值2"-->文本</标签名> 1 - 文本操作 <div class="c ...
-
JS_DOM操作之绑定事件
1 - 静态绑定:直接把事件写在标签元素中 <div id="div" onclick="foo(this)">click</div> ...
-
JS_DOM操作之查找标签
1 - 直接查找标签 // 方式1:获取元素 document.getElementsByTagName("标签名") document.getElementById(" ...
-
关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
-
Sql Server系列：分区表操作
1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...
-
C# ini文件操作【源码下载】
介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...
-
js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
-
jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
随机推荐
-
深入netty源码解析之一数据结构
Netty是一个异步事件驱动的网络应用框架,它适用于高性能协议的服务端和客户端的快速开发和维护.其架构如下所示: 其核心分为三部分, 最低层为支持零拷贝功能的自定义Byte buffer: 中间层为通 ...
-
Android中常见功能包描述
在Android中,各种包写成android.*的方式,重要包的描述如下所示:android.app :提供高层的程序模型.提供基本的运行环境android.content:包含各种的对设备上的数据进 ...
-
测试peerdroid示例程序步骤
来自JXTA交流群(36855950)...韦发改(992611244) 15:12:25—————————————————————————————————————————————————————— ...
-
无线路由器的“克隆MAC地址”是干什么作用的？
本文章转载:http://blog.sina.com.cn/s/blog_4c900d100102uysb.html 1.问题: 无线路由器的“克隆MAC地址”是干什么作用的?怎样使用? 2.使用背景 ...
-
Shell 脚本学习资料搜集
Shell文档 ChinaUnix上大神“網中人”总结的Shell十三问,强烈推荐,这本书讲得比较精炼,而且都是一些Shell学习中容易把握不住的一些细节难点.每一问都写得非常精彩.ChinaUnix ...
-
Unity有限状态机编写
有限状态机FSM 是对行为逻辑的抽象. 在整个FSM架构中 首先有一个状态基类stateObject 里面有三个方法,分别是状态前.状态中.状态后. 所有具体行为类都要继承这个基类,在这三个方法中具体 ...
-
android中获取屏幕的信息
获取屏幕信息比较简单,可以通过android的sdk自带的工具类DisplayMetrics.话不多说,上代码: // 获取屏幕的信息 DisplayMetrics dm = new DisplayM ...
-
.htaccess伪静态(URL重写)绑定域名到子目录实现子站点
Apache主机一般支持.htaccess伪静态,即可以实现绑定域名到子目录.一个空间多个站点. 应用举例:绑定htaccess.800m.net到htaccess目录 根目录下.htaccess内容 ...
-
Vmware 虚拟机无法启动
问题背景: 自己的电脑坏了,用的事小伙伴的电脑,安装VMware 软件,然后创建虚拟机(放在移动硬盘上).在操作虚拟主机的时候,中间不小心碰到了移动硬盘, 然后移动硬盘就掉线了.这个时候再去启动虚拟主 ...
-
RocketMQ环境搭建
1 源码下载 wget http://mirror.bit.edu.cn/apache/rocketmq/4.2.0/rocketmq-all-4.2.0-bin-release.zip unzip ...