JS DOM 来控制HTML元素
JS DOM 来控制HTML元素
（ps:这个有很多方法,挑一些详解，嘻嘻）
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元素的更多相关文章
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- javascript - DOM对象控制HTML元素详解
1.方法 getElementsByName() -- 获取name getElementByTagName() -- 获取 getAttribute() --获取元素属性 se ...
- web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解
1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素 getAttribute() 获取元 ...
- DOM操作，控制HTML元素 （原生JS）
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTM ...
- 使用JS控制伪元素的几种方法
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...
- JavaScript进阶 - 第9章 DOM对象，控制HTML元素
第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- JS总结之二：DOM对象控制HTML
DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...
随机推荐
- python 零散记录(六) callable 函数参数 作用域 递归
callable()函数: 检查对象是否可调用,所谓可调用是指那些具有doc string的东西是可以调用的. 函数的参数变化,可变与不可变对象: 首先,数字 字符串 元组是不可变的,只能替换. 对以 ...
- Problem 2214 Knapsack problem 福建第六届省赛
题目链接:http://acm.fzu.edu.cn/problem.php?pid=2214 题目大意:给你T组数据,每组有n个物品,一个背包容量B,每件有体积和价值.问你这个背包容纳的物品最大价值 ...
- poj 2932 Coneology（扫描线+set）
Coneology Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 3574 Accepted: 680 Descript ...
- java解惑
java对转义字符没有提供任何特殊处理.编译器在将程序解析成各种符号之前,先将 Unicode 转义字符转换成为它们所表示的字符[JLS 3.2] 阅读笔记
- Linux I2C设备驱动编写（一）
在Linux驱动中I2C系统中主要包含以下几个成员: I2C adapter 即I2C适配器 I2C driver 某个I2C设备的设备驱动,可以以driver理解. I2C client 某个I2C ...
- hdoj 2087 剪花布条
剪花布条 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- radix树
今天在学Linux内核页高速缓存时,学到了一种新的数据结构radix树(基数),经过分析,感觉此数据结构有点鸡肋,有可能是我理解不到位吧. 先来张图,给大家以直观的印象 当有一个key-value型的 ...
- PAT 1016. Phone Bills
A long-distance telephone company charges its customers by the following rules: Making a long-distan ...
- Look and say numbers
地址:http://www.codewars.com/kata/53ea07c9247bc3fcaa00084d/train/python There exists a sequence of num ...
- WPF combobox 圆角制作
修改ComboBox的Template, 在VS 2010或者Blend中你可以导出ComboBox的默认模板: VS2010中: 然后修改里面的模板,比如: <Window x:Class=& ...