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页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...
随机推荐
- Unity2018破解版安装教程（windows）
最近啊,在研究一些游戏的搭建与算法的创新,所以学习使用unity,下面来跟大家分享Unity2018的安装过程. 1.下载安装包(我的下载地址:链接:https://pan.baidu.com/s/1 ...
- SpringMVC--使用hibernate validator数据校验
JSR 303 Spring3开始支持JSR 303 验证框架,JSR303是Java为Bean数据合法性校验所提供的标准框架.JSR 303 支持XML和注解风格的验证,通过在Bean属性上标注类似 ...
- drf三大组件之频率认证组件
复习 """ 1.认证组件:校验认证字符串,得到request.user 没有认证字符串,直接放回None,游客 有认证字符串,但认证失败抛异常,非法用户 有认证字符串, ...
- 吴裕雄 python 机器学习——人工神经网络感知机学习算法的应用
import numpy as np from matplotlib import pyplot as plt from sklearn import neighbors, datasets from ...
- jsp+servlet实现的验证登陆
可以将业务逻辑处理和视图相分离,使用jsp界面表示视图,使用servlet处理业务逻辑 login.jsp <%@ page language="java" contentT ...
- Java - Test - TestNG: Idea 添加 TestNG 依赖
1. 概述 Idea 开发的 maven 添加 testng 依赖 2. 背景 最近复习 TestNG 尝试搭建环境 发现教材和网上很多的教程, 都是 eclipse 的 我用的是 idea 这个貌似 ...
- py1
python 下载安装 https://python.org python解释性语言 python数据结构 *输入输出 print(12,34,56,end='',sep='*') input() ...
- 洛谷 P1494 [国家集训队]小Z的袜子（莫队）
题目链接:https://www.luogu.com.cn/problem/P1494 一道很经典的莫队模板题,然而每道莫队题的大体轮廓都差不多. 首先莫队是一种基于分块的算法,它的显著特点就是: 能 ...
- 2019CSP-S T1格雷码
题目大意: 格雷码(Gray Code)是一种特殊的 nn 位二进制串排列法,它要求相邻的两个二进制串间恰好有一位不同,特别地,第一个串与最后一个串也算作相邻. nn 位格雷码不止一种,下面给出其中一 ...
- Hibernate与jsp技术结合的小例子
今天在某个教程上看到了jsp技术与Hibernate技术结合的一个小的例子,觉得很好,把它实现出来 按照Hibernate建工程的一贯做法, 首先 我们建立一个Hibernate工程,在工程下添加我们 ...