Js中的dom

  • 文档对象模型

    • html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改(在dom树当中 一切皆为节点对象)
  • Dom的方法和属性
    • getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

Code：输出 <input type="text" name="username" value="天天学习，好好向上" id="tid" >标签value属性的值

<body>

<form name="form1" action="test.html" method="post" >

<input type="text" name="username" value="天天学习，好好向上" id="tid" onchange="" >

<input type="button" name="ok" value="保存1"/>

</form>

</body>

<script type="text/javascript">

var inputNode = document.getElementById("tid");

alert(inputNode.value);

</script>

Code：输出 <input type="text" name="username" value="天天学习，好好向上" id="tid" >标签type属性的值

<body>

<form name="form1" action="test.html" method="post" >

<input type="text" name="username" value="天天学习，好好向上" id="tid" onchange="" >

<input type="button" name="ok" value="保存1"/>

</form>

</body>

<script type="text/javascript">

//输出 <input type="text" name="username" value="IT精英培训" id="tid" >标签type属性的值

/* var inputNode = document.getElementById("tid");

alert(inputNode.type);

*/

</script>
  • getElementsByName() 寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

code

<body>

<form name="form1" action="test.html" method="post" >

<input type="text" name="tname" value="IT_1" id="tid_1" ><br>

<input type="text" name="tname" value="IT_2" id="tid_2" ><br>

<input type="text" name="tname" value="IT_3" id="tid_3" ><br>

<input type="button" name="ok" value="保存1"/>

</form>

</body>

<script type="text/javascript">

//通过元素的name属性获取所有元素的引用

var inputNodes = document.getElementsByName("tname");

//测试该数据的长度

alert(inputNodes.length);

//遍历元素,输出所有value属性的值

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

alert(inputNode.value);

}

//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

inputNode.onchange = function(){

alert(this.value);

};

}
  • getElementsByTagName() 寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数

code

<body>

<form name="form1" action="test.html" method="post" >

<input type="text" name="tname" value="好好学习，天天向上1" id="tid_1" ><br>

<input type="text" name="tname" value="好好学习，天天向上2" id="tid_2" ><br>

<input type="text" name="tname" value="好好学习，天天向上3" id="tid_3" ><br>

<input type="button" name="ok" value="保存1"/>

</form>

<select name="edu" id="edu">

<option value="博士">博士^^^^^</option>

<option value="硕士" selected="selected">硕士^^^^^</option>

<option value="本科" >本科^^^^^</option>

<option value="幼儿园">幼儿园^^^^^</option>

</select>

<select name="job" id="job" >

<option value="美容">美容^^^^^</option>

<option value="IT">IT^^^^^</option>

<option value="程序员">程序员^^^^^</option>

<option value="建筑师">建筑师^^^^^</option>

</select>

<br/>

<input id="btn" type="button" value="输出select被选中的值" />

</body>

<script type="text/javascript">

//获取所有的input元素,返回值是数组

var inputNodes = document.getElementsByTagName("input");

//测试长度

alert(inputNodes.length);

//遍历value的值

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

alert(inputNode.value);

}

//输出type="text"中 value属性的值 不包含按钮(button)

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

if(inputNode.type=="text"){

alert(inputNode.value);

}

}

//输出所有下拉选select的option标签中value的值

var optionNodes = document.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

var optionNode = optionNodes[i];

alert(optionNode.value);

}

//输出所有下拉选 id="edu"中option标签中 value属性的值

var edu = document.getElementById("edu");

var optionNodes = edu.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

var optionNode = optionNodes[i];

alert(optionNode.value);

}

//点击按钮输出下拉框中被选中的值

var btn = document.getElementById("btn");

btn.onclick = function(){

var optionNodes = document.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

var optionNode = optionNodes[i];

if(optionNode.selected){

alert(optionNode.value);

}

}

};

</script>
  • hasChildNodes() 该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

Code:

<body>

<form name="form1" action="test.html" method="post" >

<input type="text" name="tname" value="好好学习，天天向上_1" id="tid_1" /><br>

<input type="text" name="tname" value="好好学习，天天向上_2" id="tid_2" /><br>

<input type="text" name="tname" value="好好学习，天天向上_3" id="tid_3" /><br>

<input type="button" name="ok" value="保存1"/>

</form>

<select name="edu" id="edu">

<option value="博士">博士^^^^^</option>

<option value="硕士">硕士^^^^^</option>

<option value="本科" selected="selected" >本科^^^^^</option>

<option value="幼儿园">幼儿园^^^^^</option>

</select>

<select name="job" id="job" >

<option value="美容">美容^^^^^</option>

<option value="IT">IT^^^^^</option>

<option value="程序员">程序员^^^^^</option>

<option value="建筑师">建筑师^^^^^</option>

</select>

</body>

<script type="text/javascript">

//查看id="edu"的节点是否含有子节点

var edu = document.getElementById("edu");

alert(edu.hasChildNodes());

//查看id="tid_1"的节点是否含有子节点

var tid_1 = document.getElementById("tid_1");

alert(tid_1.hasChildNodes());

</script>
  • nodeName属性（nodeName是一个只读属性）

    • 文档中每个每个节点都有以下属性。
    • nodeName:一个字符串，其内容是给定节点的名字。
    • 如果节点是元素节点，nodeName返回的是这个元素的名称
    • 如果是属性节点，nodeName返回这个属性的名称
    • 如果是文本节点，nodeName返回一个内容为#text的字符串
  • nodeType属性(nodeType是个只读属性)
    • nodeType:返回一个整数，这个数值代表着给定节点的类型。

      • nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

        Node.ELEMENT_NODE ---1 -- 元素节点

        Node.ATTRIBUTE_NODE ---2 -- 属性节点

        Node.TEXT_NODE ---3 -- 文本节点

  • NodeValue属性
    • 如果给定节点是一个属性节点，返回的是这个属性值。
    • 如果给定节点是个文本节点，返回值是这个文本几点的内容。
    • 如果给定节点是一个元素节点，返回值是null
    • NodeValue是一个读写属性，但是不能给元素节点的nodeValue属性设置值，但可以为文本节点的nodeValue属性设置一个值。

Code：

<body>

<form name="form1" action="test.html" method="post" >

<input type="text" name="tname" value="好好学习，天天向上_1" id="tid_1" ><br>

<input type="text" name="tname" value="好好学习，天天向上_2" id="tid_2" ><br>

<input type="text" name="tname" value="好好学习，天天向上_3" id="tid_3" ><br>

<input type="button" name="ok" value="保存1"/>

</form>

<p id="pid">明天上课</p>

</body>

<script type="text/javascript">

//元素节点 id="tid_1" 输出nodeName nodeType nodeValue

var node = document.getElementById("tid_1");

alert(node.nodeName);//input

alert(node.nodeType);//1

alert(node.nodeValue);//null

//文本节点 id="pid" 输出nodeName nodeType nodeValue

var node = document.getElementById("pid");

var textNode = node.firstChild;

alert(textNode.nodeName);//#text

alert(textNode.nodeType);//3

alert(textNode.nodeValue);//明天上课

//属性节点 id="pid" 输出nodeName nodeType nodeValue

var node = document.getElementById("pid");

var p = node.getAttributeNode("id");

alert(p.nodeName);//id

alert(p.nodeType);//2

alert(p.nodeValue);//pid */

</script>
  • replaceChild() 把一个给定父元素里的一个子节点替换为另外一个子节点

Code：

<body>

您喜欢的城市:<br>

<ul>

<li id="bj" value="beijing">北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing"> 重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐<p>精英</p></li>

<li id="ms" value="moshou">魔兽</li>

<li id="cq" value="chuanqi">传奇</li>

</ul>

</body>

<script type="text/javascript">

//点击北京节点， 将被反恐节点替换

var bj = document.getElementById("bj");

var fk = document.getElementById("fk");

bj.onclick = function(){

var parentNode = this.parentNode;

parentNode.replaceChild(fk,this);

};

</script>
  • getAttribute() 返回一个给定元素的一个给定属性节点的值

Code：

<body>

您喜欢的城市:<br>

<ul>

<li id="bj" value="beijing">北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing">重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐</li>

<li id="ms" value="moshou">魔兽</li>

<li id="xj" value="xingji">星际争霸</li>

</ul>

</body>

<script type="text/javascript">

//<li id="xj" value="xingji">星际争霸</li>节点的value属性的值

var xj = document.getElementById("xj");

alert(xj.getAttribute("value"));

</script>
  • setAttribute() 将给定元素节点添加一个新的属性值或改变它的现有属性的值

Code：

<body>

您喜欢的城市:<br>

<ul>

<li id="bj" value="beijing">北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing">重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐</li>

<li id="ms" value="moshou">魔兽</li>

<li id="xj" value="xingji" >星际争霸</li>

</ul>

</body>

<script type="text/javascript">

//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>

var xj = document.getElementById("xj");

xj.setAttribute("name","xingjizhengba");

//测试

alert(xj.getAttribute("name"));

</script>
  • createElement() 按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

Code：增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下

<body>

您喜欢的城市:<br>

<ul id="city">

<li id="bj" value="beijing">北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing">重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐</li>

<li id="ms" value="moshou">魔兽</li>

<li id="xj" value="xingji">星际争霸</li>

</ul>

</body>

<script type="text/javascript">

//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下

var li = document.createElement("li");

li.setAttribute("id","tj");

li.setAttribute("v","tianjin");

var txt = document.createTextNode("天津");

li.appendChild(txt);

var city = document.getElementById("city");

city.appendChild(li);

</script>
  • insertBefore() 把一个给定节点插入到一个给定元素节点的给定子节点的前面

code

<body>

<ul>

<li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">重庆</li>

</ul>

</body>

<script type="text/javascript">

// 创建新的节点 <li id="tj" name="tianjin">天津</li>

var li = document.createElement("li");

li.setAttribute("id","tj");

li.setAttribute("v","tianjin");

var txt = document.createTextNode("天津");

li.appendChild(txt);

// 在 <li id="cq" name="chongqing">重庆</li>的前面

var ul = document.getElementsByTagName("ul");

var cq = document.getElementById("cq");

ul[0].insertBefore(li,cq);

</script>
  • removeChild() 从一个给定元素里删除一个子节点

code

<body>

<ul id="city">

<li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">重庆</li>

</ul>

</body>

<script type="text/javascript">

//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>

var city = document.getElementById("city");

var bj = document.getElementById("bj");

city.removeChild(bj);

</script>
  • innerHTML innerHTML 属性可以用来读，写某给定元素里的 HTML 内容

code

<body>

<div id="subject">jquery</div>

</body>

<script language="JavaScript">

//使用innerHTML读出id=subject中的文本内容

var div = document.getElementById("subject");

alert(div.innerHTML);

//将<h1>今天</h1>写到div的层中

var div = document.getElementById("subject");

div.innerHTML = "<h1>今天</h1>";

</script>
时间： 2024-10-14 09:40:52

Js中的dom的相关文章

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

js中的Dom事件模型以及表格方面等内容

1.实现评论页面的制作 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 1000px; margin: 0 auto; border: 1px solid #E7EAEE; overflow: hidden; pad

JS中的DOM操作和事件

[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点: 可以使用getElement系列方法,取到元素节点. [查看元素节点] 1.getElementById:通过id取到唯一节点.如果ID重名,只能取到第一个. getElementsByName(): 通过name属性   getElementsByTagName(): 通过标签名   getElementsByClassName()

js中的dom节点以及offset,client,scroll家族

一.节点. 1.父节点:parentNode; 2.兄弟节点: (1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling); (2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling); 3.子节点: (1).选中第一个子节点:firstElementChild(在Ie中用firstChild); (2).选中最后一个子节点:lastElementChild(在ie中用lastChild); (3).选

B.JS中的DOM

在JS中经常会用到DOM,document object modle,即文档对象模型.其实就是在我们打开一个网页之后会自动建立的一个模型.首先我们先实例一个网页: <html> <head> <meta charset="utf-8"> <title>bob's love</title> </head> <body> <p id="FirstParagraph">bob'

js中的DOM操作（一）——查看及设置节点

一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口. 在HTML和JavaScript的学习中,DOM操作可谓时重中之重.今天,小编就领着大家来看看DOM操作是个什么样子!! 二.DOM节点  DOM节点分为三大类:元素节点.属性节点.文本节点: 而我们心心念念想知道的DOM树就长酱紫!          

JS中的DOM— —节点以及操作

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图

JS中的DOM对象及JS对document对像的操作

DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:reload()刷新 history:方法:go() status:不常用 document:下面详细介绍 JS对document对像的操作 分两个: 找到对象.操作对象. 找到对象的方法:document.getElementById().document.getElementsByName(). do