0
0

JS(DOM)第十五课

Dom的全称是Document Object Model

DOM 定义了访问 HTML 和 XML 文档的标准

Dom的定义

DOM 文档对象模型

DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。


这张思维导图带你理解HTML和body,head的关系图


本文章的大纲内容

1 获取Html标记的节点元素

  1. <script>
  2.     // 获取Html标记的节点元素
  3.     var html=document.documentElement
  4.     console.log(html);
  5.     html.style.background = 'pink'
  6. </script>
  7.


获取Html标记的节点元素中打印出来的结果

2 获取head的节点

  1.  <script>
  2.      var head = document.head
  3.      console.log(head)
  4.  </script>
  5. ody>


获取head的节点

3 获取body的节点

  1.  <script>
  2.      var body = document.body
  3.      console.log(body)
  4.      document.write(body)
  5.      body.style.background='red'
  6.  </script>
  7. ody>


获取body的节点

4 上面的三个节点综合使用 下面的是 Html的具体结构 节点直接的导航

  1. <div>我是Dom操作的元素信息内容</div><div>我是第二个节点<span></span><span>节点的含义</span><span>节点的含义</span></div><div>我是第三个节点</div>
  1.  <script>
  2.      // 文档声明
  3.      var DOCTYPE = document.doctype
  4.      console.log(DOCTYPE)
  5.      // html
  6.      var html = document.documentElement
  7.      console.log(html);
  8.      html.style.background = 'pink'
  9.      // head
  10.      var head = document.head
  11.      console.log(head)
  12.      head.style.background = "yellow"


我设置的黄色呢

  • console.log(body.parentNode) //body的父节点 Html
  • console.log(head.parentNode) //head的父节点 Html
  • console.log(body.previousSibling) //前兄弟节点 #text
  • console.log(head.nextSibling) //后兄弟节点 #text
  • console.log(head.childNodes) //head子节点 NodeList(9) [text, meta, text, meta, text, meta, text, title, text]
  • console.log(body.firstChild) //第一个节点 #text
  • console.log(body.lastChild) //最后一个子节点 <script><script>
  • console.log(body.childNodes[0]) //子节点
    我是Dom操作的元素信息内容
  • console.log(body.childNodes[1]) //
    我是第二个节点
  • console.log(body.childNodes[2]) //
    我是第三个节点

通过对上面的元素基本操作是为了更好的了解节点这个概念


运行结果如图所示


这张思维导图带你理解HTML和body,head的关系图

5 Document元素之间的节点的导航

  1. <div class="box">
  2.     <h1 class="title">我是标题</h1>
  3.     <div class="container">我是div审查元素</div>
  4.     <div class="dest">我是一个段落</div>
  5. </div>
  6. <span>我是span标签元素</span>

** var body = document.body //获取下面的父节点**

  • console.log("获取body标签的内容")
  • console.log(body)
  • console.log("获取下面的父节点")
  • console.log(body.parentElement)
  • console.log("//获取前兄弟节点")
  • console.log(body.previousElementSibling)//获取前兄弟节点
  • console.log("获取的子节点")
  • console.log(body.children)//获取的子节点
  • console.log("获取的子节点1")
  • console.log(body.children[0])//获取的子节点1
  • console.log("获取的子节点2")
  • console.log(body.children[1])//获取的子节点2
  • console.log("获取第一个子节点的信息")
  • console.log(body.firstElementChild)
  • console.log("获取最后一个子节点的信息")
  • console.log(body.lastElementChild)

上面的文件内容是对元素中的节点导航


Document元素之间的节点的导航

6 表格元素直接的节点导行

  1.    <!-- !表格元素导行 -->
  2.    <table>
  3.        <tr>
  4.            <td class="one">1</td>
  5.            <td>2</td>
  6.            <td>3</td>
  7.            <td>4</td>
  8.            <td>5</td>
  9.        </tr>
  10.        <tr>
  11.            <td>1</td>
  12.            <td class="one">2</td>
  13.            <td>3</td>
  14.            <td>4</td>
  15.            <td>5</td>
  16.        </tr>
  17.        <tr>
  18.            <td>1</td>
  19.            <td>2</td>
  20.            <td class="one">3</td>
  21.            <td>4</td>
  22.            <td>5</td>
  23.        </tr>
  24.        <tr>
  25.            <td>1</td>
  26.            <td>2</td>
  27.            <td>3</td>
  28.            <td class="one">4</td>
  29.            <td>5</td>
  30.        </tr>
  31.        <tr>
  32.            <td>1</td>
  33.            <td>2</td>
  34.            <td>3</td>
  35.            <td>4</td>
  36.            <td class="one">5</td>
  37.        </tr>
  38.        <caption>我是caption的元素内容</caption>
  39.        <thead>我是thead的元素的内容</thead>
  40.        <tbody>123</tbody>
  41.       
  42.    </table>
  • ** var body = document.body**
  • console.log("/获取了元素的body元素") console.log(body)//获取了元素的body元素 // body.style.background = 'green' console.log("获取body的第一个孩子为 style") console.log(body.children[0])//获取body的第一个孩子为 style console.log("获取body的第二个孩子为 table") console.log(body.children[1])//获取body的第二个孩子为 table body.children[1].background='yellow' console.log("获取body的第三个孩子为 script") console.log(body.children[2])//获取body的第三个孩子为 script console.log("获取所有的tr") console.log(body.children[1].rows) //所有的tr
  • ** var table=document.body.children[0]**
  • console.log(table) console.log(table.rows) console.log(table.caption) console.log(table.tHead) console.log(table.tFoot) console.log(table.tBodies) console.log(table.rows)
  • var td=document.body.children[1].rows
  • console.log(td) // console.log(table.rows.sectionRowIndex) // var table=document.body.childElementCount[1].childNodes // console.log(table)
  • ** var gettag=document.getElementsByTagName('td')**
  • gettag.background='red' console.log(gettag)
  • ** var getclass=document.getElementsByClassName('one')**
  • console.log(getclass) //querySelector() — 精准的获取某个元素 var f=document.querySelector(".one") //uerySelectorAll()获取符合类名或者标签名等条件的的所有元素
  • var g=document.querySelectorAll('.one')
  • console.log(f) console.log(g)

上面是表格元素直接的节点导行


表格元素直接的节点导行

7 表单元素直接的节点导行

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13.     <div id="content">
  14.         <h2 class="step">注册步骤；</h2>
  15.         <form action="#" method="post" class="one">
  16.             <h3>你的账号信息；</h3>
  17.             <table class="content">
  18.                 <tr>
  19.                     <td class="left">注册方式;</td>
  20.                     <td>
  21.                         <label for="one"><input type="radio" name="emil" id="one" />
  22.                             E-mail注册
  23.                         </label>&nbsp;&nbsp;&nbsp;&nbsp;
  24.                         <label for="two"><input type="radio" name="sex" id="two" />手机号码注册</label>
  25.                     </td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td class="left" nam="you">注册邮箱；</td>
  29.                     <td><input type="text" class="right" /></td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td class="left">注册手机；</td>
  33.                     <td><input type="text" class="right" /></td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td class="left"> 登录密码</td>
  37.                     <td><input type="password " maxlength="8" class="right" /></td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td class="left">昵称；</td>
  41.                     <td><input type="text" class="right" /></td>
  42.                 </tr>
  43.             </table>
  45.             <h3>你的个人信息</h3>
  46.             <table class="content">
  47.                 <tr>
  48.                     <td class="lrft">性别； </td>
  49.                     <td>
  50.                         <label for="boy"><input type="radio" name="sex" id="boy" />男
  51.                         </label>&nbsp;&nbsp;&nbsp;&nbsp;
  52.                         <label for="girl"><input type="radio" name="sex" id="girl" />女
  53.                         </label>
  54.                     </td>
  55.                 </tr>
  57.                 <tr>
  58.                     <td class="left">学历</td>
  59.                     <td>
  60.                         <select>
  61.                             <option> -请选择-</option>
  62.                             <option> 中职/高职</option>
  63.                             <option> 专科/本科</option>
  64.                             <option> 硕士研究生</option>
  65.                             <option> 博士研究生</option>
  66.                         </select>
  67.                     </td>
  68.                 </tr>
  69.                 <tr>
  70.                     <td class="left">所在城市</td>
  71.                     <td>
  72.                         <select>
  73.                             <option> -请选择-</option>
  74.                             <option selected="selected"> 北京</option>
  75.                             <option>上海</option>
  76.                             <option>广州</option>
  77.                             <option> 深州</option>
  78.                         </select>
  79.                     </td>
  80.                 </tr>
  82.                 <tr>
  83.                     <td class="left">兴趣爱好</td>
  84.                     <td>
  85.                         <input type="checkbox" /> 足球&nbsp;&nbsp;&nbsp;&nbsp;
  86.                         <input type="checkbox" /> 篮球&nbsp;&nbsp;&nbsp;&nbsp;
  87.                         <input type="checkbox" /> 游泳 &nbsp;&nbsp;&nbsp;&nbsp;
  88.                         <input type="checkbox" /> 唱歌&nbsp;&nbsp;&nbsp;&nbsp;
  89.                         <input type="checkbox" /> 跑步&nbsp;&nbsp;&nbsp;&nbsp;
  90.                         <input type="checkbox" /> 瑜伽 &nbsp;&nbsp;&nbsp;&nbsp;
  91.                     </td>
  92.                 </tr>
  94.                 <tr>
  95.                     <td class="left"> 自我介绍</td>
  96.                     <td>
  97.                         <textarea cols="60" rows="8">评论时注意一下语言。</textarea>
  98.                     </td>
  99.                 </tr>
  100.                 <tr>
  101.                     <!-- <td align="center" colspan="2"><input type="buttom" class="btn" /></td> -->
  102.                 </tr>
  103.             </table>
  104.         </form>
  105.     </div>
  107.     <script>
  108.         var from=document.forms[0]
  109.         console.log(from)
  110.         console.log(from.elements);//获取所有元素
  111.         console.log(from.emil)//通过name属性获得焦点
  113.     </script>
  115. </body>
  117. </html>

JS(Dom对象的属性和方法)第十六课_星辰镜的博客-CSDN博客

标签： javascript 前端 html
本文转载自: https://blog.csdn.net/qq_56248592/article/details/127557050
版权归原作者 星辰镜 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JS(DOM)第十五课”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。