JS 学习游记三DOM对象

最新推荐文章于 2019-10-08 17:55:20 发布

清雨未尽时

最新推荐文章于 2019-10-08 17:55:20 发布

阅读量229

点赞数

分类专栏： js 文章标签： JS

本文链接：https://blog.csdn.net/kangguang/article/details/79356234

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、DOM对象

1. HTML DOM 树

2. 什么是 DOM?

DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:“W3文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:

1). 核心 DOM-针对任何结构化文档的标准模型

2). XML DOM-针对 XML 文档的标准模型

3). HTML DOM-针对 HTML 文档的标准模型

3. HTML DOM 是:

1). HTML 的标准对象模型
2). HTML 的标准编程接口
3). W3C 标准 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换句话说，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

4. 对DOM节点的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>康释文</title>

</head>
<body>
  <p id ="demo">
    <a href="#">北京大学</a>
  </p>
  <span>
    北京大学
  </span>
</body>
</html>

解析:1). 根节点上面例子中的根节点就是<html>2). 父节点一个节点的上面一个节点就是它的父节点。如本例中<p>的父节点是<body>，同理<span >的父节点也是<body>

3). 子节点跟父节点相反，一个节点的下一个节点就是它的子节点。<body> 的子节点是<p>、<span>,它的父节点是<html>4). 兄弟节点兄弟节点有相同父节点且在同一个层。本例中的兄弟节点是<p>跟<span>

二、获取DOM对象

1. getElementById()

在 JavaScript 中，如果想通过 id 来选中元素，可以使用 document 对象的getElementById()方法。
getElementById()方法类似于 CSS 中的 id 选择器。

2. getElementsByName()

在 JavaScript 中，如果想通过 name 来选中元素，可以使用 document 对象的 getElementsByName()方法。

三、获取相关节点

1. 访问父节点

A. parentNode()

功能:获取指定节点的父节点

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

效果：

2. 访问兄弟节点1). nextSibling

功能:可返回某个节点之后紧跟的节点(处于同一树层级中)

说明:
1). 如果无此节点，则该属性返回 null
2). 元素中的空格被视作文本，而文本被视作文本节点举行:

实现获取兄弟节点的 ID 代码如下:

<body style="background-color:orange">

  <p>列表示例:</p>
  <ul id="myList">
      <li id="item1">fenzhen</li><li id="item2">waite</li>
  </ul>
  <p id="demo">点击按钮来获得首个项目的下一个同胞的 id。</p>
  <button οnclick="myFunction()">获取</button>
  <script>

      function myFunction() {
          var x=document.getElementById("demo");
          x.innerHTML=document.getElementById("item1").nextSibling.id;
      }
  </script>
</body>

显示前

显示后：

注意:

返回某个节如果上面两个<li>标签有空格则会出现“undefined”

2). previousSibling

功能:可返回某个节点之前紧跟的节点(处于同一树层级中)

3. childNodes

功能:访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有 length 属性

<body style="background-color:orange">

  <p id="demo">请点击按钮来获得   元素子节点的相关信息。</p>
  <button οnclick="myFunction()">获取</button>
  <script>

      function myFunction() {
          txt="";
          c=document.body.childNodes;
          for(i=0; i<c.length; i++) {
              txt=txt + c[i].nodeName + "<br>";
              x=document.getElementById("demo");
              x.innerHTML=txt;
          }
      }
  </script>
</body>

二、操作DOM属性、HTML和文本

1. js 获取的 html 内容包括

1). 文本内容
2). 属性值
可以采用 js 的 dom 方法，比如 document.getElementById()但是此种方法不简洁，使用起来不方便，违反了短小精悍的原则，推荐采用 jqury的方法，jquery 即 js 库，封装了 js 的一些方法，直接用就好了。
注意:
1). 使用 jquery 需要包含 jquery.js 文档 <script type="text/JavaScript"src="jquery.js"></script>
至于 jquery.js，网上老多了，请自行下载。
2). <scrpt></script>里面必须包含 $(document).ready() 方法。
这里介绍 jquery 的 3 个方法
1). text() text 即设置或者返回文本内容
2). html() 设置或者返回 html 内容
3). val() 设置或者返回表单字段的值

<head>
    <meta charset="UTF-8">
    <title>康释文</title>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function () {
           $("#btn1").click(function () {
               $("#test1").text("<b> hello world!</b>")
           });
           $("#btn2").click(function () {
                $("#test2").html("<b> hello world!</b>")
            });
            $("#btn3").click(function () {
                $("#test3").val("Dolly Duck")
            });
        });
    </script>

</head>
<body style="background-color:orange">
   <p id="test1">这是段落。</p>
   <p id="test2">这是另一个段落。</p>
   <p>Input  field:
       <input  type="text"
               id="test3"
               value="Mickey  Mouse">
   </p>
   <button id="btn1">设置文本</button>
   <button id="btn2">设置 HTML</button>
   <button id="btn3">设置值</button>
</body>

2. 通过attribute获取和设置属性值

<a href="www.f-z.cn" target="_blank">前端大学</a>，
<p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p> <button οnclick="myFunction()">试一下</button>
<script>
    function myFunction() {
        var a=document.getElementsByTagName("a")[0];
        document.getElementById("demo").innerHTML=a.getAttribute("target");
    }
</script>

点击后

清雨未尽时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 学习游记三DOM对象

一、DOM对象1. HTML DOM 树2. 什么是 DOM?DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:“W3文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分:1). 核心 DOM-针对任何结构化文档的标准模型2). XML DOM-针对 XML...
复制链接

扫一扫

专栏目录