js-DOM控制HTML
一、 dom对象控制html
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
getElementByName() -获取name
getElementByTagName() -获取元素
getAttribute() -获取元素属性
setAttribute() -设置元素属性
childNodes() -访问子节点
parentNode() -访问父节点
createElement() -创建元素节点
createTextNode() -创建文本节点
insertBefore() -插入节点
removeChild() -删除节点
offsetHeight() -网页尺寸（不包含滚动条）
scrollHeight() -网页尺寸（包含滚动条）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom对象控制html</title>
</head>
<body>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<a href="#" id="aid" title="得到了a标签的属性">hello</a>
<a href="#" id="aid2">world</a>
<ul><li>1</li><li>2</li><li>3</li></ul>
<div id="div">
<p id="pid">hello</p>
</div>
<script type="text/javascript">
function getName(){
var count = document.getElementsByTagName("p");
alert(count.length);
var p = count[2];
p.innerHTML = "world";
}
//getName();
function getAttr(){
var anode = document.getElementById("aid");
var attr = anode.getAttribute("title");
alert(attr);
}
//getAttr();
function setAttr(){
var anode = document.getElementById("aid2");
anode.setAttribute("title","动态设置a标签的属性;即修改a标签的属性");
var attr = anode.getAttribute("title");
alert(attr);
}
//setAttr();
function getChildNodes(){
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);
alert(childnode[0].nodeType);
}
//getChildNodes();
function getParentNodes(){
var div = document.getElementById("pid");
alert(div.parentNode.nodeName);
}
//getParentNodes();
function creatNode(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
body.appendChild(input);
}
creatNode();
function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode = document.createElement("p");
newnode.innerHTML = "动态添加第一个p元素";
div.insertBefore(newnode,node);
}
//addNode();
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}
removeNode();
function getSize(){
var width = document.documentElement.offsetWidth||document.body.offsetWidth;
var height = document.documentElement.offsetHeight||document.body.offsetHeight;
alert(width+","+height);
}
getSize();
</script>
</body>
</html>
二、 DOM操作元素的属性
<a id="aid" href="http:www.baidu.com">baidu</a>
<button onclick="demo()">anniu</button>
<script>
function demo(){
document.getElementById("aid").href="http:www.jikexueyuan.com";
}
</script>
<img id="aid" src="21CN.jpg"/>
<button onclick="demo()">anniu</button>
<script>
function demo(){
document.getElementById("aid").src="36Kr.jpg";
}
</script>
三、DOM操作改变CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作改变CSS</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<p>hello world</p>
</div>
<button onclick="demo()">anniu</button>
<script type="text/javascript">
function demo(){
var chang=document.getElementById("div1").style.background="blue";
}
</script>
</body>
</html>
四、DOM EventListener
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM EventListener</title>
</head>
<body>
<button id="btn">anniu</button>
<script type="text/javascript">
// document.getElementById("btn").addEventListener("click",function(){
// alert("hello");
// });
var x=document.getElementById("btn");
x.addEventListener("click",hello); //向指定元素添加句柄
x.addEventListener("click",world); //句柄可以添加多个，且不会覆盖
x.removeEventListener("click",hello); //移除添加的句柄
function hello(){
alert("hello");
}
function world(){
alert("world");
}
</script>
</body>
</html>
js-DOM控制HTML的更多相关文章
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
随机推荐
- webRTC-实时流媒体的福音
WebRTC是一项在浏览器内部进行实时视频和音频通信的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术.[1] WebRTC实现了基于网页的视频会议 ...
- Number Range 管理之并行缓冲
Number Range 管理之并行缓冲: 常用的事务代码SNRO,SM56还有一些业务专用的号码管理,可以在SPRO中查找: SNRO :Number Range 管理 一般的操作是维护号码范围.如 ...
- 原创内容搬家到csdn博客啦~
以后原创的文章就发布在csdn博客啦: http://blog.csdn.net/aceyan0718 这里就用来当作一个网络笔记本吧,转载些优质的内容
- Unity3D Shader入门指南（一）
动机 自己使用Unity3D也有一段时间了,但是很多时候是流于表面,更多地是把这个引擎简单地用作脚本控制,而对更深入一些的层次几乎没有了解.虽然说Unity引擎设计的初衷就是创建简单的不需要开发者操心 ...
- fidder 抓 https包配置方法(ios & android & pc浏览器)
1. fidder抓https包的基本配置,可参见以下博文 http://blog.csdn.net/idlear/article/details/50999490 2. 遇到问题:抓包看只有Tunn ...
- isInstance和isAssignableFrom的用法
String str = ""; Object o = new Object(); System.out.println(String.class.isInstance(o)); ...
- leveldb - menifest文件格式
MANIFEST文件是Level DB的元信息文件,它里面的格式是leveldb的Log格式,一个menifest是一个record: void VersionEdit::EncodeTo(std:: ...
- 1. 初探MongoDB —— 介绍、安装和配置
一.写在前面 之前一直以来,都是使用关系型数据库.也很早就听闻,当数据量大的时候,关系型数据库使用起来会有很多问题.诸如查询数据慢,加载花费时间长等等. 也早就耳闻NOSQL(NoSQL = Not ...
- 三层架构与MVC & 设计模式的较量
刚刚学习了三层架构,并且正在实际应用中,但随着学习的深入,又了解到了一个叫MVC的东西,(早在设计模式中就听到过MVC,仅仅是简单查了一下什么意思.)如今正好把这三个东西放在一起聊聊. 三层 是一个分 ...
- 第 3 章 MySQL 存储引擎简介
第 3 章 MySQL 存储引擎简介 前言 3．1 MySQL 存储引擎概述 MyISAM 存储引擎是 MySQL 默认的存储引擎,也是目前 MySQL 使用最为广泛的存储引擎之一.他的前身就是我们在 ...