码迷,mamicode.com
首页 > Web开发 > 详细

JS基础10-DOM访问HTML方式

时间:2018-03-27 01:53:36      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:isp   get   count   function   hid   opened   model   set   stc   

一、DOM

1.DOM是文档对象模型(Document Object Model)的简称。当网页加载时,可以将结构化文档在内存中转换成对象的树。

 

简单的说DOM并不是一种技术,而是一种访问结构化文档的一种思想。借助DOM模型,我们可以对DOM树进行修改、删除、新增等操作,让结构化文档动态化。

 

DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有以下3种节点:

 

  1. 元素节点:各种标签就是这些元素节点的名称,例如<p><ul>
  2. 文本节点:文本节点总是被包含在元素节点的内部
  3. 属性节点:一般用来修饰元素节点就称之为属性节点。

二、DOM访问HTML的方式

DOM主要有两种方式来访问HTML。

  1. 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。 
  2. 技术分享图片
    <title>无标题文档</title>
    <style>
    
        </style>
        <script type="text/javascript">
        function show(){
            var content1=document.getElementById(‘son1‘).innerText;
            var content2=document.getElementById(‘grandson2‘).value;
            var content3=document.getElementById(‘grandson3‘).value;
            var content4=document.getElementsByClassName(‘grandson4‘).value;
            alert(content1+"\n"+content2+"\n"+content3+"\n"+content4);
        }
        </script>
    </head>
    
    <body>
    <div id="oldfather">
        <div id="son1">
        <span>我是div块</span>
        </div>
        <div id="son2">
        <textarea name="" id="grandson2" cols="30" rows="10">好好学习,天天向上</textarea>
        </div>
        <div id="son3">
            <input type="text" id="grandson3" value="上我啊">
        </div>
        <div id="son4">
            <input type="button" class="grandson4" value="访问三个元素的内容" onClick="show()">
        </div>
    </div>
    </body>
    </html>
    第一种方式
  3. 2.利用节点关系访问HTML元素。常用的属性和方法如下:

parentNode

返回当前节点的父节点

previousSibling

返回当前节点的前一个兄弟节点

nextSibling

返回当前节点的后一个兄弟节点

childNodes

返回当前节点的所有子节点

firstChild

返回当前节点的第一个子节点

lastChild

返回当前节点的最后一个子节点

getElementsByTagName(tagName)

返回当前节点的具有指定标签名的所有子节点


技术分享图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用节点关系查找HTML元素</title>
<style type="text/css">
    /*以赵六为参照物*/
    #n4{color:red}
    </style>
</head>

<body>
<ul id="names">
    <li id="n1">张三</li>
    <li id="n2">李四</li>
    <li id="n3">王五</li>
    <li id="n4">赵六</li>
    <li id="n5">小红</li>
    <li id="n6">小明</li>
</ul>

<input type="button" value="父节点" onClick="showContent(current.parentNode)">
<input type="button" value="第一个子节点" onClick="showContent(current.parentNode.firstChild.nextSibling)">
<input type="button" value="上一个节点" onClick="showContent(current.previousSibling.previousSibling)">
<input type="button" value="下一个节点" onClick="showContent(current.nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onClick="showContent(current.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li的元素个数" onClick="showCount()">
<script type="text/javascript">
    var current=document.getElementById("n4");
    function showContent(target){
        alert(target.innerHTML);
    }
    function showCount(){
        alert(document.getElementsByTagName("li").length);
    }
</script>
</body>
</html>
第二种方式

 

JS基础10-DOM访问HTML方式

标签:isp   get   count   function   hid   opened   model   set   stc   

原文地址:https://www.cnblogs.com/LuckyGJX/p/8654666.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!