zoukankan      html  css  js  c++  java
  • DOM节点例子

    elementNode.setAttribute(name,value)

    1.name: 要设置的属性名。

    2.value: 要设置的属性值。

    elementNode.getAttribute(name)

    1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

    2. name:要想查询的元素节点的属性名字

    元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)
    文本节点:包含在元素节点中。
    属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。

    nodeName 属性
    nodeName 属性规定节点的名称。
    nodeName 是只读的
    元素节点的 nodeName 与标签名相同
    属性节点的 nodeName 与属性名相同
    文本节点的 nodeName 始终是 #text
    文档节点的 nodeName 始终是 #document
    注释:nodeName 始终包含 HTML 元素的大写字母标签名。
    nodeValue 属性
    nodeValue 属性规定节点的值。
    元素节点的 nodeValue 是 undefined 或 null
    文本节点的 nodeValue 是文本本身
    属性节点的 nodeValue 是属性值

    nodeType 属性
    nodeType 属性返回节点的类型。nodeType 是只读的。
    比较重要的节点类型有:
    元素类型 NodeType
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

    elementNode.childNodes

    访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,它具有length属性。如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。

    一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

    node.firstChild
    说明:与elementNode.childNodes[0]是同样的效果。

    二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

    node.lastChild

    获取指定节点的节点

    elementNode.parentNode

    注意:父节点只能有一个。

    访问节点:

    elementNode.parentNode.parentNode

     nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)
    nodeObject.nextSibling
    说明:如果无此节点,则该属性返回 null。
     previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
    nodeObject.previousSibling
    说明:如果无此节点,则该属性返回 null。

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body><div>  
                <span id="span">各类节点</span>  
            </div>  
            <script type="text/javascript">
                window.onload = function() {
                    var element = document.getElementById("span");
                    var text = element.firstChild;
                    var property = document.getElementById("span").getAttributeNode("id");
                    //nodeName
                    alert("这是元素节点的返回值:" + element.nodeName); //返回的标签名SPAN,注意是大写的
                    alert("这是文本节点的返回值:" + text.nodeName); //返回的#text  
                    alert("这是属性节点的返回值:" + property.nodeName); //返回的是属性名,这里是id
                    //nodeValue
                    alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,返回的是null  
                    alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值  各类节点  
                    alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值 span  
                    //nodeType
                    alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1  
                    alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3  
                    alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2  
                }
                
            </script>
        </body>
    
    </html>
  • 相关阅读:
    Codeforces Round #336 (Div. 2) A. Saitama Destroys Hotel 模拟
    UVA 10341 二分搜索
    cscope 的使用
    2018年各大互联网前端面试题三(阿里)
    【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
    【前端统计图】echarts实现单条折线图
    【前端统计图】echarts实现简单柱状图
    css实现悬浮效果的阴影
    通过select下拉框里的value控制div显示与隐藏
    2018年各大互联网前端面试题四(美团)
  • 原文地址:https://www.cnblogs.com/lhl66/p/7518534.html
Copyright © 2011-2022 走看看