DOM的一些小总结
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的一些小总结的更多相关文章
- DOM+CSS3实现小游戏SwingCopters
前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加 ...
- 使用Hammer.js的H5页面开发DOM的一些小说法
前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. ...
- 一些JavaScript中的DOM的优化小技巧
在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...
- DOM拓展表格小练习
涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...
- DOM之一些小实验demo
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- React虚拟DOM浅析
在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...
- 个人对于Virtual DOM的一些理解
之前一直认为react的Virtual DOM操作会比传统的操作DOM要快,这其实是错误的,React 从来没有说过 "React 比原生操作 DOM 快".如果没有 Virtua ...
- 【翻译】要理解Ext JS 5小工具
原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...
- 微信小程序的动画效果
前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...
随机推荐
- Blocked Billboard II
前言 今天比赛真的状态不好(腐了一小会),导致差点爆0. 这个题解真的是在非常非常专注下写出来的,要不然真的心态崩. 刚换了域名,发现了美化脚本的bug,有点担心(汗-_-||). 题目 题目描述 奶 ...
- echarts制作html和JavaScript的时钟和代码分析与注释
1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...
- [lua]紫猫lua教程-命令宝典-L1-01-04. 字符串数据
L1[字符串]01. 单引号与双引号 没什么说得 字符串:以双引号包含 或者单引号包含 或者[[]]包含 L1[字符串]02. 长文本内容 小知识:如果用[[]]包含字符串内容 但是字符串内容里面 包 ...
- Codeforces Round #624 (Div. 3) F
题意: 给出n的质点,带着初位置和速度: 如果中途两点可以相遇dis(i,j)=0: 如果不可以相遇,mindis(i,j): 求n个点的两两质点最小dis(i,j)之和 思路: 因为当初位置x和速度 ...
- mybatis的8月29日
一.select查询语句 1.mybatis的映射,jdbc预处理 <select id="selectPerson" parameterType="int&quo ...
- zabbix-server报错：No route to host
前戏: 我在VM虚拟机中创建了2个liunx系统(rhel7和cent7),一个用作zabbix服务端,另一个用作zabbix客户端.但是用服务端监控客户端时图标是红色的监控不了,报错信息为:Get ...
- 搭建vue工程遇到的问题汇总
1.vue搭建环境- vue init webpack my-project无响应(如下报错) 原因:node 版本过高.v8.1.0 解决拌饭: 降级,终端指令 n v8.0.0; mac用户: s ...
- 2、json教程
JSON(JavaScript)对象表示法是一种轻量级的基于文本的开放标准, 被设计用于可读的数据交换, 约定使用JSON的程序包括 C C++ Java Python Perl 总结 JSO ...
- JAVA基础学习（6）之使用对象
6使用对象 6.1字符类型 6.1.1字符类型 char和int互相转换 //a比A大32 Scanner in=new Scanner(System.in); char c='B'; char c1 ...
- socket模块（套接字模块）
socket模块(套接字模块) 一.最简单版本(互传一次就结束) # 客户端 import socket client = socket.socket() client.connect(('127.0 ...