标签：hang red on() 的区别 document 第一步 NPU 代码 button
DOM的概念，获取/更改文本框的value
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程-获取文本框的value</title> </head> <body> <script type="text/javascript"> /* 1、JavaScript包括三大块： ECMAScript：JS的核心语法（ES规范 / ECMA-262标准） DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。 var domObj = document.getElementById("id"); BOM：Browser Object Model（浏览器对象模型） 关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。 2、DOM和BOM的区别和联系？ BOM的顶级对象是：window DOM的顶级对象是：document 实际上BOM是包括DOM的！ */ /* window.onload = function(){ //var btnElt = window.document.getElementById("btn"); var btnElt = document.getElementById("btn"); alert(btnElt); // object HTMLInputElement } */ window.onload = function(){ var btnElt = document.getElementById("btn"); btnElt.onclick = function(){ // 可以修改它的value document.getElementById("username").value = "zhangsan"; } } </script> <!-- <input type="button" id="btn" value="hello" /> --> <input type="text" id="username" /> <input type="button" value="获取文本框的value" id="btn"/> <hr> <script type="text/javascript"> window.onload = function(){ document.getElementById("setBtn").onclick = function(){ document.getElementById("username2").value = document.getElementById("username1").value; } } </script> <input type="text" id="username1" /><br> <input type="text" id="username2" /><br> <input type="button" value="将第一个文本框中的value赋值到第二个文本框上" id="setBtn" /> <!--blur事件：失去焦点事件--> <!--以下代码中的this代表的是当前input节点对象,this.value就是这个节点对象的value属性。--> <input type="text" onblur="alert(this.value)" /> </body> </html>
div标签设置样式，innerText和innerHTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程-innerHTML和innerText操作div和span</title> <style type="text/css"> #div1{ background-color: aquamarine; width: 300px; height: 300px; border: 1px black solid; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <!-- innerText和innerHTML属性有什么区别？ 相同点：都是设置元素内部的内容。 不同点： innerHTML：会把后面的“字符串”当做一段HTML代码解释并执行。 innerText：即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。 --> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ // 设置div的内容 // 第一步:获取div对象 var divElt = document.getElementById("div1"); // 第二步:使用innerHTML属性来设置元素内部的内容 // divElt.innerHTML = "fjdkslajfkdlsajkfldsjaklfds"; // divElt.innerHTML = "<font color=‘red‘>用户名不能为空！</font>"; divElt.innerText = "<font color=‘red‘>用户名不能为空！</font>"; } } </script> <input type="button" value="设置div中的内容" id="btn"/> <div id="div1"></div> </body> </html>
标签：hang red on() 的区别 document 第一步 NPU 代码 button
原文地址：https://www.cnblogs.com/zsben991126/p/12696903.html
