JS中使用DOM来控制HTML元素
1.getElementsByName():获取name.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
例：
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<script>
function getName(){
var count=document.getElementsByName("pn");
alert(count.length);
var p=count[2];
p.innerHTML="world";
}
</script>
结果：界面打印出三个hello，并且伴有一个提示框“3”，当点击确定后，界面显示的内容变为hello hello world
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··
2.getElementsByTagName():获取元素。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<p>hello</p>
<p>hello</p>
<p>hello</p>
<script>
function getName(){
var count=document.getElementsByTagName("p");
alert(count.length);
var p=count[2];
p.innerHTML="world";
}
</script>
结果：界面打印出三个hello，并且伴有一个提示框“3”，当点击确定后，界面显示的内容变为hello hello world
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.getAttribute():获取元素属性。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<a id="aid" title="得到a的标签属性"></a>
<script>
function getAttr1(){
var anode=document.getElementById("aid");
var attr=anode.getAttribute("id");
alert("a的ID是:"+attr);
}
function getAttr2(){
var anode=document.getElementById("aid");
var attr=anode.getAttribute("title");
alert("a的title内容是："+attr);
}
getAttr1();
getAttr2();
</script>
结果：弹出提示框“a的ID是：aid”.点击确定后，弹出提示框“a的title内容是：得到a的标签属性”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute()设置元素属性。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<a id="aid2">aid2</a>
<script>
function setAttr(){
var anode=document.getElementById("aid2");
anode.setAttribute("title","动态设置a的title属性");
var attr=anode.getAttribute("title");
alert("动态设置的title值为："+attr);
}
setAttr();
</script>
结果：弹出提示框“动态设置的title值为：动态设置a的title属性”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.childNodes():访问子节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~··
例
<ul><li>1</li><li>2</li><li>3</li></ul>
<script>
function getChildNode(){
var childnode=document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);
alert(childnode[0].nodeType);
}
getChildNode();
</script>
结果：界面打印出.1 .2 .3弹出对话框“3”，按确定后弹出“1”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.parentNode():访问父节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·
例
<div>
<p id="pid"></p>
</div>
<script>
function getParentNode(){
var div=document.getElementById("pid");
alert(div.parentNode.nodeName);
}
getParentNode();
</script>
结果：弹出提示框：DIV.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.createElement():创建元素节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例：
<script>
function createNode(){
var body=document.body;
var input=document.createElement("input");
input.type="button";
input.value="按钮";
body.appendChild(input);//插入节点
}
createNode();
</script>
结果:出现一个按钮。
~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.createTextNode():创建文本节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例：
<script>
function createNode(){
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
}
createNode();
</script>
代码分析：这个例子创建了一个新<div>元素并为它指定了值为“message”的class特性。然后，又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档中的<body>元素中，这样可以在浏览器中看到新创建的元素和文本节点了。
结果：页面显示hello world。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.insertBefore():插入节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<div id="div">
<p id="pid">p元素</p>
</div>
<script>
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();
</script>
结果：界面打印出：动态插入一个p元素
p元素
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10.removeChild():删除节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·
例
<div id="div">
<p id="pid">p元素</p>
</div>
<script>
function removeNode(){
var div=document.getElementById("div");
var p=div.removeChild(div.childNodes[1]);
}
removeNode();
</script>
结果：界面什么也没显示。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.offsetHeight:网页尺寸
12.scrollHeight:网页尺寸
~~~~~~~~~~~~~~~~~~~~~~~~~~~·
例：
<script>
function getSize(){
var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题
var height=document.documentElement.offsetHeight||document.body.offsetHeight;
alert(width+","+height);
}
getSize();
</script>
显示结果：
这篇文章主要介绍了JS DOM 来控制HTML元素，文章内容主要包括关于DOM，HTML等，文章来自网络，请参考。
相关推荐
-
javascript与jquery动态创建html元素示例
本文实例讲述了javascript与jquery动态创建html元素的方法.分享给大家供大家参考,具体如下: 1.javascript创建元素 创建select var select = document.createElement("select"); elect.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2",
-
javaScript给元素添加多个class的简单实现
javaScript给元素添加多个class的简单实现 <html> <head> <style type="text/css"> .div2{ font-size:16px; color:orange; } .div3{ font-size:20px; color:blue; } <style> <script type="text/javascript"> [1]直接把样式赋值给className va
-
JS从数组中随机取出几个数组元素的方法
JS如何从一个数组中随机取出一个元素或者几个元素. 假如数组为 var items = ['1','2','4','5','6','7','8','9','10']; 1.从数组items中随机取出一个元素 var item = items[Math.floor(Math.random()*items.length)]; 2.从前面的一篇随机数组中随机取几个元素 function getRandomArrayElements(arr, count) { var shuffled = arr.sl
-
js 动态给元素添加、移除事件的实现方法
最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio
-
js删除Array数组中指定元素的两种方法
本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=
-
js删除数组元素、清空数组的简单方法(必看)
一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置. 三,js 删除数组几种方法 var arr=['a','b','c
-
js实现动态创建的元素绑定事件
新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("cancelable"); 以上这篇js实现动态创建的元素绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
JavaScipt选取文档元素的方法(推荐)
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现
-
JS中使用DOM来控制HTML元素
1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 例: <p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <script> function getName(){ var count=docume
-
JS中获取 DOM 元素的绝对位置实例详解
在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien
-
学习JS中的DOM节点以及操作
DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图
-
js中利用tagname和id获取元素的方法
本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下 方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素 方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组 方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta cha
-
原生js中运算符及流程控制示例详解
运算符 算数:+ 加.- 减.* 乘./ 除.% 求模 赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否 实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li
-
深入理解JS中的Promise.race控制并发量
目录 开篇 一.Promise.race 二.并发效果展示 三.代码 总结与思考 开篇 比如在开发中会进行一系列的网络请求,但是有些情况需要控制一下网络请求请并发量.这里简单的用 Promise.race 及 await 的特性来理解一下,如何对任务的并发量进行控制. 一.Promise.race Promise.race 作用就是将多个异步任务包裹起来,当有一个完成的话,那么就会触发 then 事件.除了这个不错的特性方法外,await 这个关键字也比较有用,可以这样理解,await 后面的代
-
js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码
复制代码 代码如下: <?php /* <?xml version="1.0" encoding="utf-8"?> <article> <item> <title name="t1"></title> <content>content1</content> <pubdate>2009-10-11</pubdate> </ite
-
js中查找最近的共有祖先元素的实现代码
先来看概念,首先DOM是一棵树,其根节点是Document,大致可以用下图来表示: 所谓"最近的共有祖先元素",是指给定一系列元素,找出在树中深度最大的,但同时为所有这些元素的祖先元素的元素. 比如上图中,I和G的结果为C,G和H的结果为A,D和E的结果为html,C和B的结果为html等. 测试驱动 对于偏逻辑的题,并没有十足的把握函数是正确的,因此还是先构造测试的用命,力求让函数通过测试. 本次就以上图的结构作为DOM结构,A表示body,B表示head,其他节点均使用div元素,
-
js中的DOM模拟购物车功能
效果图: 代码如下: <!DOCTYPE html> <html> <head> <title> new document </title> <meta charset="utf-8"> <style> table{ border:1px solid #000; border-collapse:collapse; width:600px; } td{ border:1px solid #000; tex
-
js基础之DOM中元素对象的属性方法详解
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个 文档节点 . 所有的HTML元素都是 元素节点 所有 HTML 属性都是 属性节点 文本插入到 HTML 元素是 文本节点 注释是 注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',