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. C++的四种转换(const_cast、static_cast、dynamic_cast、reinterpreter_cast)

    static_cast 相当于C语言中的强制转换:(类型)表达式或类型(表达式),用于各种隐式转换 非const转const.void*转指针.int和char相互转换 用于基类和子类之间的指针和引用 ...

  2. linux下安装keepalived

    keepalived安装文档 1. 安装环境 su - root yum -y install kernel-devel* yum -y install openssl-* yum -y instal ...

  3. Docker - 创建第一个 docker 实例

    1. 概述 安装完准备开始使用 2. 环境 os centos 7 docker docker - ce 19.03 3. 步骤 启动docker > systemctl start docke ...

  4. JDBC 基础用法学习

    JDBC概述 java 数据库链接,sun公司退出的 java 访问数据库的标准规范接口 是一种用于执行SQL语句的 java API 可以作为多种关系数据库提供统一接口 是一组 java 工具类和接 ...

  5. C 语言实例 - 判断三边能否构成三角形

    原理: 要判断输入的三条边能否够成三角形,只需满足条件两边之和大于第三边即可. #include<stdio.h> int main() { printf("请输入三个边长:\n ...

  6. 汪莹：以RELX悦刻为例，复盘中国品牌出海的跨文化挑战

    海外销售额每月2倍增速,3个月拿下东南亚市场第一,出口43个国家,拥有250万用户--你可能不知道,这是一家成立仅一年半.出海仅7个月的中国企业交出的答卷. 这家企业就是中国第一大电子烟品牌RELX悦 ...

  7. winform BackgroundWorker 的用法 - 异步执行

    1.设置 backgroundWorker1.WorkerReportsProgress = true; backgroundWorker1.WorkerSupportsCancellation = ...

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

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

  9. document删除元素(节点)

    不需要获取父id:document.getElementById("id").parentNode.removeChild(document.getElementById(&quo ...

  10. 脚本中的random几率问题详解

    random解释: 没有固定数值,随即给的意思,数值越大就几率越低,跟爆率也不多,如下脚本,所有都抽不到的话,就会执行最后面没有检测条件的那个.   [@main] #if random 10 #ac ...