dom（知道这些就够了）

提问时间：2022-11-17 16:27:51来源：小樱知识网

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。

HTML DOM 模型被构造为对象的树：

查找 HTML 元素

//通过 id 查找 HTML 元素 var x=document.getElementById("intro"); //通过标签名查找 HTML 元素 var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); //通过类名找到 HTML 元素 var x=document.getElementsByClassName("intro");

HTML DOM 改变 HTML 内容

//改变 HTML 输出流 document.write(Date()); //绝对不要在文档加载完成之后使用,用btn点击事件执行 document.write()。这会覆盖该文档。 //改变 HTML 内容 document.getElementById(id).innerHTML=new HTML //改变 HTML 属性 document.getElementById(id).attribute=new value

HTML DOM 改变 CSS

//改变 HTML 样式 document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; <h1 id="id1">我的标题 1</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> 点我!</button>

HTML DOM 事件

//对事件做出反应 <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> <script> Function changetext(id){ id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">点击文本!</h1> </body> //HTML 事件属性 <body> <p>点击按钮执行 <em>displayDate()</em> 函数.</p> <button onclick="displayDate()">点我</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> //使用 HTML DOM 来分配事件 document.getElementById("myBtn").onclick=function(){displayDate()}; //onchange 事件 <script> function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 输入你的名字: <input type="text" id="fname" onchange="myfunction()"> <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p> </body>

HTML DOM 事件监听器

//addEventListener() 方法 <body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <p id="demo"></p> <script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </body> //向原元素添加事件句柄 <body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); }); </script> //向同一个元素中添加多个事件句柄 <body> <p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p> <button id="myBtn">点我</button> <script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!") } function someOtherFunction() { alert ("函数已执行!") } </script> </body>

HTML DOM 元素

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性，分别是：

nodeName : 节点的名称nodeValue ：节点的值nodeType ：节点的类型

创建新的 HTML 元素

<body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是一个新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>

删除已有的 HTML 元素

<body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script> </body>

以上内容整理于网络，如有侵权请联系删除。

以上内容就是为大家推荐的dom（知道这些就够了）最佳回答，如果还想搜索其他问题，请收藏本网站或点击搜索更多问题

内容来源于网络仅供参考