HTML DOM的结构:可以把HTML看成一个个的节点。

节点：

HTML DOM对象 --  方法和属性

一些DOM 对象方法

nodeName 属性

nodeValue 属性

nodeType：节点的类型。

<body>

<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>

</body>

<script>

var d = document.createAttribute("good");

document.getElementById("sss").setAttributeNode(d);

alert(document.getElementById("t").innerHTML)

</script>
  • 　　有点懂，但还是有点不明白。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>DOM-1</title>

	<script>

		window.onload = function (){

			var oUl = document.getElementById("ul1");

			//alert(oUl.innerHTML);

			//alert(oUl.parentNode.parentNode.parentNode.nodeName);	//#document

			//alert(oUl.childNodes[0].nodeName);	//#text

			//alert(oUl.children[0].nodeValue);	//null

			//alert(oUl.children[0].innerHTML);	//1111

			//alert(oUl.nodeType);	//1

			//alert(oUl.childNodes[0].nodeType);	//3

			//alert(oUl.parentNode.parentNode.parentNode.nodeType);	//9

			var oLi = document.createElement("li");

			//oid.innerHTML = "li1";

			oLi.innerHTML = "5555";

			//oUl.appendChild(oLi);

			oUl.insertBefore(oLi,oUl.children[2]);

			//oUl.removeChild(oLi);

			//

			//alert(oUl.getAttribute("id"));	//ul1

			oUl.setAttribute("class","fff");	//class="fff"

			var d = document.createAttribute("good");

			d.value = "abc";

			document.getElementById("sss").setAttributeNode(d);

			alert(oUl.innerHTML);

		}

	</script>

</head>

<body>

	<ul id="ul1">

		<li>1111</li>

		<li id="sss">2222</li>

		<li>3333</li>

		<li>4444</li>

	</ul>

</body>

</html>

　　

DOM的一些小总结的更多相关文章

  1. DOM+CSS3实现小游戏SwingCopters

    前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加 ...

  2. 使用Hammer.js的H5页面开发DOM的一些小说法

    前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. ...

  3. 一些JavaScript中的DOM的优化小技巧

    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...

  4. DOM拓展表格小练习

    涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...

  5. DOM之一些小实验demo

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  6. React虚拟DOM浅析

    在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...

  7. 个人对于Virtual DOM的一些理解

    之前一直认为react的Virtual DOM操作会比传统的操作DOM要快,这其实是错误的,React 从来没有说过 "React 比原生操作 DOM 快".如果没有 Virtua ...

  8. 【翻译】要理解Ext JS 5小工具

    原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...

  9. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

随机推荐

  1. HTTP状态码详解（上）

    HTTP状态码的英文为 HTTP Status Code.下面是常见的HTTP状态码: 200 - 请求成功 301 - 资源(网页等)被永久转移到其它URL 404 - 请求的资源(网页等)不存在 ...

  2. Ubuntu 安装 k8s 三驾马车 kubelet kubeadm kubectl

    Ubuntu 版本是 18.04 ,用的是阿里云服务器,记录一下自己实际安装过程的操作步骤. 安装 docker 安装所需的软件 apt-get update apt-get install -y a ...

  3. 浅谈对Jquery+JSON+WebService的使用小结

    https://www.jb51.net/article/36207.htm  更新时间:2013年04月28日 12:19:55   作者:    我要评论   本篇文章介绍了对Jquery+JSO ...

  4. Java进阶学习（5）之设计原则(下)

    框架加数据 把数据的硬编码尽可能解成框架加数据的结构 城堡游戏修改后的代码 Room类 package com.castle; import java.util.HashMap; public cla ...

  5. 存储引擎：engine

    1.表类型: 默认的服务器表类型,通过my.ini文件可以手动修改配置:default-storage- engine=INNODB 在创建表,或者编辑表时,可以指定表的存储引擎: 语法:engine ...

  6. 字符串类型：char,varchar,text,enum,set

    字符串类型 1.char 格式:char (M) 2.varchar 格式:varchar (M) [注意]M表示允许的字符串长度[65535].M表示的是字符数,而不是字节数.但是最大长度的使用是按 ...

  7. iOS开发之使用 infer静态代码扫描工具

    infer是Facebook 的 Infer 是一个静态分析工具.可以分析 Objective-C, Java 或者 C 代码,报告潜在的问题. 任何人都可以使用 infer 检测应用,可以将严重的 ...

  8. blog主题——樱花

    贮存一下,blog代码 QAQ 页脚html <!--live2d--> <script src="https://blog-static.cnblogs.com/file ...

  9. 连接mongodb服务

    语法:mongo.exe ip地址:端口号/数据库名(默认连接test) mongodb的默认端口号:27017 MongoDB内部结构   MongoDB MySQL 文档(Document) 记录 ...

  10. mapreduce课上实验

    今天我们课上做了一个关于数据清洗的实验,具体实验内容如下: 1.数据清洗:按照进行数据清洗,并将清洗后的数据导入hive数据库中: 2.数据处理: ·统计最受欢迎的视频/文章的Top10访问次数 (v ...