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. AcWing 866. 试除法判定质数

    #include <iostream> #include <algorithm> using namespace std; bool is_prime(int x) { ) r ...

  2. ES6 Set和Map的那点事

    Set  1.Set特点 类数组 新增数据结构 是构造函数 成员值唯一  注重独一无二的特征 2.Set实例的常用方法 console.log('------------Set操作方法-------- ...

  3. 大小端（MSB & LSB）

    谈到字节序的问题,必然牵涉到两大CPU派系.那就是Motorola的PowerPC系列CPU和Intel的x86系列CPU.PowerPC系列采用big endian方式存储数据,而x86系列则采用l ...

  4. windows安装jenkins及ant/maven/jdk配置

    一.jenkins安装 下载地址:https://jenkins.io/download/,下载下来为一个war文件 (1)第一种启动方式,电脑一启动,jenkins会自动运行 命运行运行 java  ...

  5. STA之RC网

    STA的主要工作是计算电路网络的延时,如今的电路网络还是由CMOS cell和net组成的,所以STA所要计算的延时仍是电容的充放电时间.等量子计算机普及的时候,如今的这一套理论都将随着科技的进步被丢 ...

  6. 2019 EIS高校安全运维赛 misc webshell

    webshell 第一种思路: 1.菜刀都是http协议,发的包都是POST包,所以在显示过滤器下命令:http.request.method==POST 2.右键,追踪tcp流,发现是蚁剑流量 3. ...

  7. 通过颜色绘制图片UIImage

    + (UIImage *)clearImageView { UIColor *color=[UIColor clearColor]; CGRect rect =CGRectMake(,,,); UIG ...

  8. 从0到1了解 CI/CD

    现代软件开发的需求加上部署到不同基础设施的复杂性使得创建应用程序成为一个繁琐的过程.当应用程序出现规模性增长,开发团队人员变得更分散时,快速且不断地生产和发布软件的流程将会变得更加困难.为了解决这些问 ...

  9. Jquery span标签的取值赋值

    //赋值 $("#spanid").html(value) //取值 $("#spanid").text()

  10. dp（小猪存钱罐）

                      B - Piggy-Bank 在acm能够做任何事情之前, 必须编制预算并获得必要的财政支持.这一行动的主要收入来自IBM.这个想法其实很简单,每当一些会员有一点小 ...