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元素的更多相关文章

  1. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  2. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  3. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  4. web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解

    1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素   getAttribute() 获取元 ...

  5. DOM操作，控制HTML元素 （原生JS）

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTM ...

  6. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  7. JavaScript进阶 - 第9章 DOM对象，控制HTML元素

    第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...

  8. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  9. JS总结之二：DOM对象控制HTML

    DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...

随机推荐

  1. Suse系统用户不能登录报错

    Linux系统用户创建了user用户,使用putty登陆系统,用户为user,系统登陆报 错: Could not chdir to home directory /home/user: Permis ...

  2. Web---演示Servlet的相关类、下载技术、线程问题、自定义404页面

    Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代表用户的 ...

  3. 【转】谁说Vim不是IDE？（一）

    谁说Vim不是IDE?(一)   话说操作系统.编程语言和编辑器似乎是程序员永恒的吐槽话题,技术发展了几十年,大家讨论起这几个“之争”还是充满愤怒.津津乐道.有人描述过Emacs和VI程序员,大家沿着 ...

  4. 8-11-Exercise

    链接:第四次小练 A.POJ 3094   Quicksum 水题中的水题啊~ 直接上代码: #include <iostream> #include <cstdio> #in ...

  5. Android studio开发常用快捷键

    最常用快捷键 1.Ctrl+E  可以显示最近编辑的文件列表 2.Shift+Click(点击)  可以关闭文件 3.Ctrl+[或者ctrl+]  可以跳到大括号的开头结尾 4.Ctrl+Shift ...

  6. Linux系统Load average负载详细解释

    我们知道判断一个系统的负载可以使用top,uptime等命令去查看,它分别记录了一分钟.五分钟.以及十五分钟的系统平均负载 例如我的某台服务器: $ uptime 09:50:21 up 200 da ...

  7. Android_设备隐私获取，忽略6.0权限管理

    1.前言 (1).由于MIUI等部分国产定制系统也有权限管理,没有相关api,故无法判断用户是否允许获取联系人等隐私.在Android 6.0之后,新增权限管理可以通过官方api判断用户的运行状态: ...

  8. 如何查看电脑的链接WIFI密码

    这个查看起来确实有难度,一般软件也难以破解.不如你试试在浏览器输入192.168.1.1,账户密码都是admin然后进入路由设置里.无线安全设置里有.

  9. oracle合并查询

    1). Union 该操作符用于取得两个结果集的并集.当使用该操作符时,会自动去掉结果集中重复行. 2).union all 该操作符与union相似,但是它不会取消重复行,而且不会排序. 3). I ...

  10. Android 自定义View修炼-自定义可动画展开收缩View的实现

    有时候需要点击一个view可以动画展开和收缩折叠一个View这样的效果,这样就可以直接自定义View来实现. 本例中,采用继承FrameLayout来实现自定义的ExpandView.下面将详细介绍各 ...