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 ...
随机推荐
- Java中long和Long有什么区别 (转载)
“Long is a class. long is a primitive. That means Long can be null, where long can't. Long can go an ...
- 滑动返回类库SwipeBackLayout的使用问题,解决返回黑屏,和看到桌面
SwipeBackLayout是一个很好的类库,它可以让Android实现类似iOS系统的右滑返回效果,但是很多用户在使用官方提供的Demo会发现,可能出现黑屏或者返回只是看到桌面背景而没有看到上一个 ...
- 寻找倒数第K个结点
#include<stdio.h> #include<iostream> using namespace std; /** * 找到链表中的倒数第k个节点 */ //定义结构体 ...
- Android定位&地图&导航——自定义公交路线代码
一.问题描述 基于百度地图实现检索指定城市指定公交的交通路线图,效果如图所示 二.通用组件Application类,主要创建并初始化BMapManager public class App exten ...
- 在ps中画两个同心圆并且把两个同心圆进行任意角度切割
在工作中遇到要在ps中画如图两个同心圆,并且进行6等分.查找资料加自己摸索,可以通过以下方式实现: 1.新建一画布.并用通过标尺画出两条水平和垂直参考线,选择椭圆工具,并在选项设置中选择圆和从中心两个 ...
- Modbus通讯协议学习 - 串口调试
概述 我们在做任何事情之前都需要获取很多 调试步骤: 1:485转换器连接硬件 2:485转换器上的USB接口连接电脑. 3:打开设备管理器 ->查看端口 4:打开串口调试工具,在串口配置的地方 ...
- Android 模拟器检测
参考链接:https://github.com/MindMac/HideAndroidEmulator 从多个方面识别模拟器1.用户习惯:联系人数量.短信数量.相册里面照片数量.安装的应用2.从IME ...
- GPUImage 内置滤镜解析
#pragmamark - 调整颜色 Handle Color GPUImageBrightnessFilter //亮度GPUImageExposureFilter //曝光GPUImageCont ...
- OllyICE 调试的程序无法处理异常 解决方法
问题描述 在用OllyICE打开可执行文件时出现如下图所示错误 解决方法 1. 选项 -> 调试设置 , 打开调试选项 2. 切换到 异常 页签 3. 取消勾选 忽略(传递给程序)以下异常: 单 ...
- 【汇总】iOS开发及Xcode使用中遇到的一些报错问题汇总
这里整合下在开发过程中遇到过的一些报错问题和解决办法:(今天开始逐渐增加) Xcode编译错误集锦:http://www.cnblogs.com/ios-wmm/p/3402261.html ...