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页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...
随机推荐
- AcWing 858. Prim算法求最小生成树 稀疏图
//稀疏图 #include <cstring> #include <iostream> #include <algorithm> using namespace ...
- ubuntu建立软链接注意事项
ln 参数 源文件 目标链接文件 -s:代表新建一个软链接,又称符号链接: eg. ln -s /mnt/d/Documents/source.xlsx target.xlsx 1.目标文件的后缀名 ...
- 查看Mysql数据库版本
一.使用终端 1.参数为-V(大写字母)或者--version 使用方法: D:\mysql\bin>mysql -V 或者 D:\mysql\bin>mysql --version
- QT写的一个小工具:阿里云MQTT连接参数生成器.
一.工具介绍. 最近在研究MQTT协议联网的一些问题,现在主流的物联网平台都支持MQTT协议. 在做阿里云平台连接测试的时候,连接参数的生成没有好用的工具, 所以就自己写了一个. 这个工具主要用于阿里 ...
- DFS（深度优先搜索）
基本概念 深度优先搜索算法(Depth First Search,简称DFS):一种用于遍历或搜索树或图的算法. 沿着树的深度遍历树的节点,尽可能深的搜索树的分支.当节点v的所在边都己被探寻过或者在搜 ...
- Sublime Text3搭建完美开发环境（Python+PHP+Javascript+nodejs+C++）
一.Sublime配置(如已安装Package Control可跳过) sublime下载地址:http://www.sublimetext.com/3 安装Package Control插件: 直接 ...
- JS高级---体会面向对象和面向过程的编程思想
体会面向对象和面向过程的编程思想 ChangeStyle是自定义的构造函数,再通过原型添加方法的函数. 实例化对象,导入json参数,和创建cs,调用原型添加的方法函数 过渡,先熟悉记忆 <!D ...
- 豆瓣工程师为你解答关于 Python3 编程方面的问题
Python是如此活跃的一种语言,几乎伴随互联网的发生而创立,又伴随互联网的极速发展而繁荣.使用Python会遇到这样的问题:什么时候该用多进程?怎样提高代码执行效率?Flask为什么流行?学习Pyt ...
- sshpass远程登陆
1,ssh ssh 端口为默认22的时候: sshpass -p 888888 scp -o StrictHostKeyChecking=no /root/images.zip root@21.1.9 ...
- __dirname和__filename和process.cwd()三者的区别
1.process cwd() 方法返回 Node.js 进程当前工作的目录 例:我在F:\自己的文件\自己在网上学习的知识点\node学习\node-API\process 这个文件加下面创建了一个 ...