w3cschool
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 所有的内容都写在身体body里。这边是输出的部分。所有的都在html这边输出。 js部分不显示。那这个是怎么来的？是结构中输出的。 怎么来的？ --> <p id="demo">我是p标签</p> <p id="intro">通过id查找HTMl元素</p> <script> /** 这个DOM是什么？不懂啊，那就去看概念弄明白。认识字能学。文本对象类型document object module * javascript中html DOM方法。HTML DOM方法是你能够在html元素上执行的动作。 html DOM属性是您能够设置或改变的HTML元素的值。 DOM编程界面：HTML DOM能够通过JavaScript进行访问（也可以通过其他编程） 在DOM中，所有HTML元素都被定义为对象。 编程界面是每个对象的属性和方法。 属性是你能够获取或设置的值（比如改变HTML元素的内容） 方法是你能够完成的动作。 getElementById("demo").innerHTML="Hello World!" 解释：getElementById这是方法，innerHTML 这是属性 getElementById方法 访问HTML元素最常用的方法是使用获取元素的id innerHTML属性的解释?获取元素内容最简单的方法是使用innerHTML 属性，innerHTML属性可用于获取或替换HTML元素的内容。 innerHTML属性可用于获取或改变任何HTML元素，包括<html>和<body>*/ document.getElementById("demo").innerHTML="Hello World!"; // 获取到intro的值，把它赋值给一个变量 var myElement=document.getElementById("intro"); // innerHTML就是获取这个标签里面的值，后面等号的话就是给它赋值。 document.getElementById("demo").innerHTML="来自intro段落的文本是："+myElement.innerHTML; // 最简单的也要写，培养熟悉感。按照客观规律生活。基本概念。朝着优秀的人学习。 // HTML DOM 文档对象是你的网页中所有其他对象的拥有者。文档对象代表你的网页。如果你总是访问document对象开始，下面是一些如何使用document对象来访问和操作HTML的实例。基本概念要掌握，夯实基本功。实战发现问题。 /** 查找HTML元素：document。getElementById(id)通过元素id来查找元素。 * document.getElementByTagName(name)通过标签名查找元素。 * document.getElementByClassName(name)通过类名来查找元素。 * 改变HTML元素：方法：element.innerHTML=new html content。inner描述：改变元素的inner HTML * element.attribute=new value 描述：改变HTML元素的属性值。 * element.setAttribute(attribute,value) 改变HTML元素的属性值 * element.style.property=new style 改变HTML元素的样式 * 添加和删除元素 * document.createElement(element) 创建HTML元素 * document.removeChild(element) 删除HTML元素 * document.appendChild(element) 添加HTML元素 * document.replaceChild(element) 替换HTML元素 * document.write(text) 写入HTML输出流 * 添加事件处理程序 * 方法：document.getElementById(id).onclick=function(){code} 描述：向onclick事件添加事件处理程序。 * 查找HTML对象 * document.anchors 返回拥有name属性的所有<a>元素 * document.applets 返回所有applets元素 * document.baseURI 返回文档的绝对基准URI * document.body 返回body元素 * document.cookie 返回文档的cookie * document.doctype 返回文档的doctype * document.documentMode 返回浏览器使用的模式 * document.documentURI 返回文档的URI * document.domain 返回文档服务器的域名 * document.domConfig 废弃。返回DOM配置 * document.embeds 返回所有<embed>元素 * document.forms返回所有的form元素 * document.head 返回所有的<head>元素 * document.images 返回所有<img>元素 * document.implementation 返回DOM实现 * document.inputEncoding 返回文档的编码（字符集） * document.lastModified 返回文档更新的日期和时间 * document.links 返回拥有href属性的所有<area>和<a>元素 * document.readyState 返回文档的加载状态 * document.referrer 返回引用的URI(链接文档) * document.scripts 返回所有script元素 * document.strictErrorChecking 返回是否强制执行错误检查 * document.title 返回<title>元素 * document.URI 返回文档的完整URL */ </script> </body> </html>