JavaScript基础学习——DOM操作

最新推荐文章于 2023-08-22 18:01:51 发布
最新推荐文章于 2023-08-22 18:01:51 发布
阅读量429 收藏
点赞数
分类专栏： JavaScript 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41890177/article/details/108458050
版权

一、DOM

是HTML和XML文档的编程接口，定义了访问和操作HTML和XML文档的标准方法。
DOM以树型目录结构表达HTML和XML文档的，每一个节点就是一个DOM元素。

二、DOM节点

（一）节点层次

节点层次分为父子节点和同胞节点两种。在节点树中，顶端节点被称为根（root），每个节点都有父节点、除了根（它没有父节点），一个节点可拥有任意数量的子节点，同胞节点是拥有相同父节点的节点，也叫兄弟节点

（二）元素节点：标签

1、属性节点：标签的属性
2、文本节点：标签后的换行符
3、文档节点：document

（三）DOM节点的名称（nodeName）

首先写一段测试的相关代码

<div class="wrapper">
  <div class="box">
    <div id="content" title="标题">这里是测试内容</div>
    <p style="color:red;background-color:gray;font-size:30px;">hello</p>
  </div>
</div>

1、元素节点 标签名相同

<script>
	console.log(document.getElementById('content').nodeName);
</script>

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
nodeName就是节点名称。
返回结果为：DIV，就是div，元素的标签。

2、属性节点 属性名相同

<script>
	console.log(document.getElementById('content').getAttributeNode('title').nodeName); 
</script>

getAttributeNode() 方法从当前元素中通过名称获取属性节点。
返回结果为：title

3、文本节点 #text

<script>
	console.log(document.getElementById('content').childNodes[0].nodeName); 
</script>

childNodes 属性返回包含被选节点的子节点的 NodeList。
返回结果为：#text

虽然一开始我也不太明白此处，但如果不懂，其实可以进行一下测试，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrapper">
    <div id="content" title="标题"> <p>test1</p> <p>test2</p> <p>test3</p> </div>
</div>
<script>
    var arr=document.getElementById('content').childNodes;
    for(var i =0;i<arr.length;i++){
        console.log(arr[i].nodeName)
    }
</script>
</body>
</html>

结果为：
在这里插入图片描述
但如果代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrapper">
    <div id="content" title="标题"><p>test1</p><p>test2</p><p>test3</p></div>
</div>
<script>
    var arr=document.getElementById('content').childNodes;
    for(var i =0;i<arr.length;i++){
        console.log(arr[i].nodeName)
    }
</script>
</body>
</html>

结果会变为：
在这里插入图片描述
注意：仔细观察，会变成这样的结果在于第一条代码中，每个p便签前后都有空格，第二个代码，p标签前后没有空格，所以，代码的轻微修改得出的结论都会不同，无论是空格和回车第一条都会显示#test。

4、文档节点 #document

<script>
	console.log(document.nodeName) ;
</script>

返回结果为：#document

（四）DOM节点的值（nodeValue）

1、元素节点 undefined 或 null

console.log(document.getElementById('content').nodeValue)

nodeValue 属性根据节点的类型设置或返回节点的值。
返回的结果为null；

2、属性节点 属性值

console.log(document.getElementById('content').childNodes[0].nodeValue)

返回结果为：这里是测试内容

3、文本节点 文本内容

console.log(document.getElementById('content').getAttributeNode('title').nodeValue)

返回结果为：标题

（五）DOM节点的类型（nodeType）

1、元素 1

  console.log(document.getElementById('content').nodeType);

返回结果为：1

2、属性 2

  console.log(document.getElementById('content').getAttributeNode('title').nodeType);

返回结果为：2

3、文本 3

  console.log(document.getElementById('content').childNodes[0].nodeType);

返回结果为：3

4、注释 8

5、文档 9

  console.log(document.nodeType)

返回结果为：9

三、节点操作

首先先写一些测试代码

<div id="box">box</div>
<p>p01</p>
<p>p02</p>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<input type="text" name="userName">

（一）获取节点

1、通过ID获取节点 【返回具体某个节点】：document.getElementById(ID名)

  var box = document.getElementById('box');
  box.style.color = 'red';

在这里插入图片描述
2、通过标签名获取节点 【返回节点数组，即使只有一个】：document.getElementsByTagName(标签名)

  var pAll = document.getElementsByTagName('p');
  pAll[0].style.fontSize = '30px';

在这里插入图片描述
3、通过标签的name值获取节点 【返回节点数组】：document.getElementsByName(Name名)

  var names = document.getElementsByName('userName');
  names[0].value = '张三';

在这里插入图片描述
4、通过class值来获取节点 【返回节点数组】：document.getElementsByClassName(Class名)

var boxes = document.getElementsByClassName('box');
for(var i in boxes){
   boxes[i].innerHTML = 'hahaha....'
}

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

在这里插入图片描述

5、根据选择器返回找到结果集中的第一个：document.querySelect(“选择器”)

  console.log(document.querySelector('p')) // 标签
  console.log(document.querySelector('.box'))// 类
  console.log(document.querySelector('#box'))// ID

在这里插入图片描述

6、根据选择器返回找到的结果集，是个节点数组：document.querySelectAll(“选择器”)

  console.log(document.querySelectorAll('p')) // 标签
  console.log(document.querySelectorAll('.box'))// 类

在这里插入图片描述

（二）创建DOM节点
首先写一段测试代码

  <style>
    .wrapper{
      color: red;
      font: bold 18px 黑体;
      background-color: #999999;
    }
    .box{
      border: 1px solid blue;
    }
  </style>

1、创建元素节点：document.createElement(‘标签名’);

  var el = document.createElement('p');
  console.log(el);

在这里插入图片描述

2、创建文本节点：document.createTextNode(‘文本内容’);

  var txt = document.createTextNode('这个节点是动态创建的');
  console.log(txt);

在这里插入图片描述
3、创建属性节点：document.createAttribute(‘属性名’);属性节点名.value = ‘属性值’; // 为属性设置值

  var attr = document.createAttribute('class');// 添加属性名
  attr.value = 'wrapper box'; // 为属性设置值
  console.log(attr);

在这里插入图片描述

4、关联以上三个节点
元素节点名.appendChild(文本节点名); // 在元素节点上添加文本节点
元素节点名.setAttributeNode(属性节点名); // 在元素节点上添加属性节点
document.body.appendChild(元素节点名); // 将创建的节点添加到文档中

  el.appendChild(txt); // 在元素节点上添加文本节点
  el.setAttributeNode(attr); // 在元素节点上添加属性节点
  console.log(el);

  document.body.appendChild(el); // 将创建的元素节点添加到文档中

在这里插入图片描述
在这里插入图片描述

简洁写法：

 var oDiv = document.createElement('div'); // 创建元素节点
 oDiv.setAttribute('class','wrapper box'); // 为元素节点添加属性及属性值
 oDiv.innerHTML = '创建DOM元素的简洁写法';  // 为元素节点设置文本内容
 document.body.appendChild(oDiv); // 将创建的元素节点添加到文档中

在这里插入图片描述

四、插入节点

测试代码

<ul class="list">
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
</ul>

首先创建一个新的li标签

  var li = document.createElement('li');
  var txt = document.createTextNode('这是新创建的li标签');
  li.appendChild(txt);

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

1、插入内部的尾部：父节点.appendChild(创建的节点)

  var list = document.getElementsByClassName('list')[0];
  list.appendChild(li);

在这里插入图片描述

2、插入内部的某个前面：父节点.insertBefore(创建的节点,已知的子节点)

  var ul = document.getElementsByClassName('list')[0];
  var oLi = ul.getElementsByTagName('li')[2];
  ul.insertBefore(li, oLi);

在这里插入图片描述

五、替换节点

测试代码

  <div class="box">box</div>
  <strong>strong</strong>

父节点.replaceChild(新节点，老节点)
此次完成一个需求：将strong标签修改成

<p style='color:pink;border:2px dotted #000;'>这是修改后的节点及内容</p>

var newP = document.createElement('p');
newP.setAttribute('style','color:pink;border:2px dotted #000;');
newP.setAttribute('title','节点修改');
newP.innerHTML = '这是修改后的节点及内容';

var oBody = document.body; // 对于节点的获取，最好缓存到内存变量中
var oldStrong = document.getElementsByTagName('strong')[0];
oBody.replaceChild(newP, oldStrong);

在这里插入图片描述

六、克隆节点

测试代码

<div class="box">
    <strong>strong</strong>
    <span>span</span>
</div>

需要被复制的节点. cloneNode(true/false)
true: 复制当前节点以及所有子节点（深度克隆）
false: 仅复制当前节点（浅克隆）

1、深度克隆： 包含子节点一起克隆。

var box = document.getElementsByClassName('box')[0];
var deepClone = box.cloneNode(true);
document.body.appendChild(deepClone);

在这里插入图片描述

2、浅克隆： 只会将找到的这个节点克隆，子节点不会克隆

    var shallowClone = box.cloneNode(false);
    document.body.appendChild(shallowClone);

注意变化：
浅克隆前：

在这里插入图片描述

浅克隆后：
在这里插入图片描述
仔细观察会发现，多了一条div class=‘box’，这边是浅克隆的精妙之处

七、删除节点

测试代码

  <div class="box">
    <strong>strong</strong>
    <span>span</span>
  </div>
  
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
  </ul>

1、删除当前节点及子节点：节点.remove();

    var box = document.getElementsByClassName('box')[0];
    box.remove();

2、删除子节点：父节点.removeChild(子节点)

    var span = box.getElementsByTagName('span')[0];
    box.removeChild(span);

3、删除ul中所有的li标签

var ul = document.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
for(var i=lis.length-1;i>=0;i--){
  ul.removeChild(lis[i]);
 }

此处注意，如果for循环内使用递加操作，也就是for(var i=0;i<lis.length;i++)，是删除不完li标签的，比如第一个标签下标是0，i=0，删除第一个后，i=1，但第二个标签下标就会变成0，自动上移一位，i=1的时候，删除的就是第三个标签，就不会删除完。
在这里插入图片描述

for(var i=0;i<lis.length;i++){
      ul.removeChild(lis[i]);
    }

在这里插入图片描述
但如果想要删除完，可以在代码内加入- -i这条语句，但会引起死循环，因为i永远是0，为了避免这一情况，最好使用递减操作

八、节点属性操作

测试代码

<style>
  img{
    width: 200px;
    height: 150px;
    display: block;
  }
</style>

<button id="btn">切换图片</button>
<img src="images/bg1.jpg" data-src="images/bg2.jpg" alt="图片" />
<img data-src="images/bg2.jpg" alt="图片" />

1、获取属性值

DOM节点.属性名 // 不能获取用户自定义属性的值

var img = document.getElementsByTagName('img')
console.log(img[0].src);
console.log(img[0].alt);

在这里插入图片描述

DOM节点.getAttribute(属性名) // 获取所有属性（用户自定义属性）的值

console.log(img[0].getAttribute('src'));
console.log(img[0].getAttribute('data-src'));

在这里插入图片描述

2、设置属性值

DOM节点.属性名 = 属性值 // 不能设置用户自定义属性的值

img[1].src = 'images/bg1.jpg'

DOM节点.setAttribute(属性名, 属性值) // 设置所有属性（用户自定义属性）的值

document.getElementById('btn').onclick = function () {
  var url = img[0].getAttribute('data-src');
  img[0].setAttribute('src',url)
}

效果：点击按钮后可以切换图片（只能切换一次）

var tag=1;
document.getElementById('btn').onclick = function () {
  if(tag==1){
    var url = img[0].getAttribute('data-src');
    img[0].setAttribute('src',url)
    tag=0;
  }
  else if(tag==0){
    var url ='images/bg1.jpg';
    img[0].setAttribute('src',url)
    tag=1;
  }
}

效果可切换多次

3、删除属性值

DOM节点.属性名 = ‘’ // 不能删除用户自定义属性

img[1].src = '';

DOM节点.removeAttribute(属性名) // 删除所有属性（用户自定义属性）

img[1].removeAttribute('src');

九、节点文本操作

测试代码

<button id="btn"><span>这是</span>切换图片</button>
<form action="">
  <input type="text" name="txt" value="这是表单文本框的内容"><br>
  <input type="radio" name="sex" value="1">男
  <input type="radio" name="sex" value="0">女 <br>

  <input type="checkbox" name="hobby" value="码代码">码代码
  <input type="checkbox" name="hobby" value="听音乐">听音乐
  <input type="checkbox" name="hobby" value="打游戏">打游戏
  <input type="checkbox" name="hobby" value="其他">其他

  <br><input type="button" value="提交" id="ok">
</form>

（一）获取文本

1、节点.innerHTML //获取节点下的所有内容包含了标签

console.log(document.getElementById('btn').innerHTML);

在这里插入图片描述
2、节点.innerText // 获取节点下的文本内容，会过滤掉标签

console.log(document.getElementById('btn').innerText);

返回结果为：这是切换标签

3、节点.value // 获取input输入框等表单控件的内容

    console.log(document.getElementsByName('txt')[0].value)
    console.log(document.forms[0].txt.value)
    console.log(document.querySelector('input').value)

以上三条返回结果相同：这是表单文本框的内容

4、节点.getAttribute(“value”) //value是表单输入框的属性，可以使用getAttribute获得value值

 console.log('value:' + document.forms[0].txt.getAttribute('value'))

返回结果为：value:这是表单文本框的内容

（二）设置文本

1、节点.innerHTML= “文本内容” // 会翻译html标签

    document.getElementById('btn').innerHTML = '这是一个<strong>命令按钮</strong>'

在这里插入图片描述

2、节点.innerText = “文本内容” // 不会翻译html标签

document.getElementById('btn').innerText = '这是一个<strong>命令按钮</strong>'

在这里插入图片描述

3、节点.value = 值

document.forms[0].sex.value = 0; 
document.forms[0].hobby.value = '码代码';// 不能通过value设置复选框的某项被选中
document.forms[0].hobby[1].checked = true; 
document.forms[0].hobby[2].checked = true;

在这里插入图片描述

4、节点.setAttribute(“value”,值) // 因为value是属性，所以也可以中这个方法设置内容

document.forms[0].hobby[0].setAttribute('value','1')

在这里插入图片描述

（三）删除文本

1、节点.innerHTML= “”

document.getElementById('btn').innerHTML = ''

在这里插入图片描述

2、节点.innerText = “”

document.getElementById('btn').innerText = ''

3、节点.value = “”

document.forms[0].hobby[0].value = ''

在这里插入图片描述

4、节点.removeAttribute(“value”)；

document.forms[0].hobby[0].removeAttribute('value')

在这里插入图片描述

**

十、DOM节点样式操作

测试代码

<style>
    .p-style{
      color: red;
      background-color: gray;
      font-size: 30px;
      font-weight: bold;
    }
    .demo{
      border: 2px solid #00f;
    }
  </style>

<p class="test p-style">这是一段测试文本</p>
<p class="test">这是一段测试文本</p>

**
（一）操作样式class

1、获取class

（1）节点.className 获取节点的所有class

  console.log(document.getElementsByClassName('test')[0].className);

（2）节点.getAttribute(“class”) 获取节点的所有class

  console.log(document.querySelector('.test').getAttribute('class'));

以上返回结果相同都是：test p-style

2、设置class

（1）节点.className = 值

document.getElementsByTagName('p')[1].className = 'p-style'

在这里插入图片描述

（2）节点.setAttribute(“class”,值)

  document.getElementsByTagName('p')[1].setAttribute('class', 'demo test p-style');

在这里插入图片描述

3、其它方法

（1）节点.classList.add(value); //为元素添加指定的类

document.getElementsByTagName('p')[1].classList.add('aaa');

在这里插入图片描述

（2）节点.classList.contains(value); // 判断元素是否含有指定的类，如果存在返回true
（3）节点.classList.remove(value); // 删除指定的类

if(document.getElementsByTagName('p')[1].classList.contains('p-style')){
    document.getElementsByTagName('p')[1].classList.remove('p-style')
  }else{
    document.getElementsByTagName('p')[1].classList.add('p-style')
  }

（4）节点.classList.toggle(value); // 有就删除，没有就添加指定类

var dom = document.getElementsByTagName('p')[1];
  dom.onclick = function(){
    dom.classList.toggle('p-style'); // 切换样式
  }

（二）操作内联样式
测试代码

<p style="color:red;">这是一段测试文本</p>
<p style="color:blue;font-size: 28px;border:1px solid #eee;position:relative;left: 100px;top:200px;overflow:hidden;">这是一段测试文本</p>
<div>div</div>

1、获取内联样式

（1）节点.style.样式属性名 // 获取某个具体的内联样式

var pDom = document.querySelectorAll('p');
console.log(pDom[0].style.color)
console.log(pDom[1].style.fontSize)

在这里插入图片描述

（2）节点.style.cssText // 获取某个节点的所有内联样式，返回字符串

  console.log(pDom[0].style.cssText)
  console.log(pDom[1].style.cssText)

在这里插入图片描述

2、设置内联样式

（1）节点.style.样式属性名 = 属性值 // 设置某个具体的内联样式

  pDom[0].style.color = 'pink'
  pDom[1].style.fontSize = '10px'

在这里插入图片描述

（2）节点.style.cssText = 属性值或属性值列表 // 设置某个节点的所有内联样式

  document.querySelector('div').style.cssText = 'color: white'
  document.querySelector('div').style.cssText = 'color: white;background-color: blue;'

在这里插入图片描述

梦起孟心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript入门篇--DOM操作
SunMoonJP的博客
02-22 803
认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 先看看下面代码：将HTML代码分解为DOM节点层次图：HTML文档可以说由节点构成的集合，三种常见的DOM节点： 1.元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。 2.文本节点：向用户展
JavaScript-DOM操作
qq_56045326的博客
06-13 486
Javas_DOM操作
当一个dom节点被点击时，我们需要能够执行一个函数，应该怎么做？
qq_32616119的博客
08-18 954
1、直接在dom节点使用 onclick 绑定函数 <div onclick="fun()"></div> function fun (){ //执行操作 } 2、使用js给dom添加事件绑定 var dom = document.getElementsByTagName('div'); dom.onclick = function(){ //执行操作 } dom.addElentListener('click',function(){ //执行操作 ) ...
div的定义div的用法 div的属性（最全的div学习页面）
最新发布
m0_67042663的博客
08-22 6998
最全的div介绍
DOM操作：
m0_52558788的博客
04-12 2257
document object model（文档对象模型） 作用：动态操作html元素节点（写特效） 操作html元素节点（element）： 节点的样式操作： 增 删 改 查： 获取当前需要操作的元素节点： Dom tree（dom树）：root element（html） document（当前文档的根节点) document.getElementById():通过id 属性获取元素 document.getElementByClassName//通过class属性，
DOM 基础（一）
holoblog
11-07 143
//HTMLPageDOM.htm &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html &gt; &lt;head&gt; &lt;title&gt;这是DOM基础学习...
JavaScript学习笔记（3）
Dontla的博客
04-09 329
文章目录Web APIs什么是DOM？DOM树如何获取网页页面元素？根据id获取元素 getElementById根据标签名获取元素 getElementsByTagName根据类名获取某些元素集合 getElementsByClassName 通用选择器querySelector querySelectorAll（既能选择id，也能选择类和通用标签）（加#表示选择id，加.表示选择类）获取特殊元素body（document.body）html（document.documentElement）事件概述（事
JavaScript程序设计——DOM访问实验报告.docx
11-11
实验报告的主题是“JavaScript程序设计——DOM访问”，其目的是深入理解和掌握DOM（Document Object Model）在JavaScript中的应用，包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示，允许...
JavaScript——DOM操作——Window.document对象详解
10-21
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript——DOM
07-03
JavaScript——DOM DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一种标准，用于表示HTML或XML文档的结构，并提供了一种程序化访问和操作文档内容的方法。JavaScript作为浏览器端最常用...
javascript基础二JavaScript DOM编程
weixin_33806300的博客
12-14 184
javascript基础二JavaScript DOM编程 今天讲解的内容更多的是要求大家要细心。 好，我们接着来看下JS中的字符串 substr(startIndex,len)//从startIndex开始，截取len个字符。                         一、substr substring(startIndex,stopIndex)//从startIndex开始...
原生js操作dom
ys_dd的博客
08-01 285
操作元素节点： 1）.创建元素节点： document.createElement(“ul”); 创建一个ul元素节点 2）.插入元素节点 appendChild(); body.appendChild(ul); insertBefore(); 在DOM树上某个节点前面操作 3）.删除元素节点 div.remove(“ul”); 4）.复制元素节点 cloneNode(); 深复制 和 浅复制 深复制（深copy）：完全复制一个完整的元素节点 浅复制（浅copy）：仅仅复制当前元素，不包..
前端笔记—第15篇js中的DOM操作
weixin_33898233的博客
03-25 122
获取事件源 document.getElementById() document.getElementsByClass() document.getElementsByTagName() document.getElementsByName() document.querySelector() document.querySelectorAll() 获取兄弟节点 //1.获取下一个兄弟节点 v...
javascript - DOM
weixin_42235173的博客
06-02 182
DOM的概念 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 DOM又称为文档树模型 文档：一个网页可以称为文档 节点：网页中的所有内容都是节点（标签、属性、文本、注释等） 元素：网页中的标签 属性：标签的属性 DOM经常进行的操作 获取元素 动态创建元素 对元素进行操作(设置其属性或调用其方法) 事件(什么时机做相应的操作
JavaScript：js删除dom节点或div的2种常见方式，附例子和运行效果
一火的专栏
12-21 1万+
js删除dom节点或div的2种常见方式 1.删除当前节点 <script> function del(divId){ document.getElementById(divId).remove(); } </script> 完整代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>deldom</...
【JS学习-DOM】键盘事件--及div元素设置键盘事件的失效的额外处理踩坑
m0_61486963的博客
08-03 1570
【JS学习-DOM】键盘事件--及div元素设置键盘事件的失效的额外处理踩坑
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
document.getElementById()获取服务端控件
idonotknowwhatislife的专栏
01-17 3601
今天敲代码的时候，发现用document.getElementById()获取不到服务端控件，在CSDN里找了找，在http://topic.csdn.net/u/20090224/09/db235c8a-3723-4430-9b41-9337dfd5e0b9.html找到了原因：服务器端控件有3个ID,分别为ID,UniqueID,ClientID，解释成html控件后 id名称会变化，所以要这样用：var textbox = document.getElementByID(""); 但是我这样用了之后，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值