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. 6_11 四分树（UVa297）<四分树>

    一幅图有1024个点, 可以对图平均分成4块, 并且子图也可以再往下分, 直到一个子图表示一个点. f表示这块子图填满, p表示它还有4个子图, e表示没有子图(当然啦, 它也没有填满). 给定两个字 ...

  2. Docker - Docker 镜像 简介

    概述 简单介绍一下 docker 镜像的概念 1. 背景 复习 docker 镜像是 docker 最基础, 最重要的概念之一 所以正式使用之前, 最好有所理解和认识 2. 镜像 概述 简单描述 理解 ...

  3. 1042B. Vitamins

    Berland shop sells nn kinds of juices. Each juice has its price cici. Each juice includes some set o ...

  4. composer 配置 切换中国镜像

    composer 默认地址改为中国镜像地址,以及中国镜像地址还原成默认地址 一.查看当前镜像地址 在命令行输入如下命令,即可查看全局镜像地址: $ composer config -g repo.pa ...

  5. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  6. pyqt5 通过QLinearGradient 绘制取色板

    要绘制HSV取色板,一般通过绘制前景色和背景色的方式实现,先绘制前景,然后绘制背景,前景是HSV颜色空间,从左到右,背景是亮度,从上到下,xs和ys是鼠标的当前的位置. def graphicsVie ...

  7. JS高级---构造函数通过原型添加方法，原型的作用: 共享数据, 节省内存空间

    JS高级---构造函数,通过原型添加方法,原型的作用: 共享数据, 节省内存空间 构造函数 //构造函数 function Person(sex, age) { this.sex = sex; thi ...

  8. Kmp算法浅谈

    Kmp算法浅谈 一.Kmp算法思想 在主串和模式串进行匹配时,利用next数组不改变主串的匹配指针而是改变模式串的匹配指针,减少大量的重复匹配时间.在Kmp算法中,next数组的构建是整个Kmp算法的 ...

  9. 安卓开发：打印Log

    在iOS开发中使用NSLog进行打印调试,在安卓中使用的是Log.v(tag, msg);等进行打印调试. 参考:[https://blog.csdn.net/salary/article/detai ...

  10. 入门chrome插件开发教程和经验总结，一篇就搞掂！

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_44244857/articl ...