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. promise学习，多看几次。含node，ES6知识

    一.引出promise解决回调地狱 需求:你要封装一个方法,我给你一个要读取文件的路径,你这个方法能帮我读取文件,并把内容返回给我 目录图片 三个txt里面的内容分别是111,222,333 1.模块 ...

  2. AS报错：Class kotlin.reflect.jvm.internal.FunctionCaller$FieldSetter can not access a member of class com.android.build.gradle.tasks.ManifestProcessorTask with modifiers "private"

    删除所有.gradle文件夹 失效缓存/重新启动

  3. MXnet的使用

    关于MXnet的介绍: MXNet: A flexible and efficient library for deep learning. 这是MXNet的官网介绍,“MXNet是灵活且高效的深度学 ...

  4. 1.2、初识WebRTC

    文章导读:本节内容,如标题所讲,“初识webrtc”.读完之后,我需要你能清楚三个问题:第一.真正的搞明白实时音视频在生产环境中的真实应用以及前景分析:第二.开发一个符合商业标准的实时音视频应用需要解 ...

  5. 项目出现红色感叹号, pom.xml并出错

    问题描述: eclipse出现红色感叹号,pom.xml 文件也报错  但没有提示具体是那里出错了. 打开 Java Build Path  找到 Librarices 你在看到 Maven  Dep ...

  6. Java Web实现使用浏览器从服务器下载文件(后台)

    Java Web实现 使用浏览器从服务器下载文件. 下面实现两种情况的下载,需求如下: 需求(一):1.用户在页面填写表单. 2.填写完成后,选择下载,将表单内容发往后台. 3.后台根据内容生产一个文 ...

  7. 解决：执行python脚本，提示错误：/usr/bin/python^M: 解释器错误: 没有那个文件或目录。

    执行python脚本,提示错误: /usr/bin/python^M: 解释器错误: 没有那个文件或目录. 产生错误原因: \r字符被显示为^M,这时候只需要删除这个字符就可以了. Linux环境下: ...

  8. Python 高级特性介绍 - 迭代的99种姿势 与协程

    Python 高级特性介绍 - 迭代的99种姿势 与协程 引言 写这个笔记记录一下一点点收获 测试环境版本: Python 3.7.4 (default, Sep 28 2019, 16:39:19) ...

  9. Mysql2docx自动生成数据库说明文档

    [需要python3.0以上] 首先安装Mysql2docx,如下: pip install Mysql2docx 然后打开pycharm,新建test.py # python from Mysql2 ...

  10. linux默认的目录结构

    /: 根目录/root: root账户的home目录/home: 用户的目录,每个用户有一个home/bin: 可执行文件和命令/lib: 库文件/etc: 配置文件存放地/usr: 用户的应用程序和 ...