JavaScript笔记（五）

最新推荐文章于 2022-02-11 14:03:52 发布

zn0999

最新推荐文章于 2022-02-11 14:03:52 发布

阅读量72

点赞数

分类专栏： Java学习文章标签： javascript java html

本文链接：https://blog.csdn.net/zn0999/article/details/104436754

版权

Java学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

demo5.html

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

<!--    DOM    Document Object Model( 文档对象模型 )-->


</head>
<body>

<div id = "d1">
    hello HTML DOM
</div>

<div>
    hello world
</div>

<div>
    hello JavaScript
</div>

<div>
    hello DOM
</div>

<h1 class = "d">Hello World</h1>
<h2 class = "d">Hello JavaScript</h2>
<div class = "d">Hello DOM</div>

用户名 <input name = "userName"><br>
密码 <input name = "userPassword"><br>

<div id = "d3" align = "center" class = "abc">Hello Html Dom</div>

</body>

<script>
    function p(s){
        document.write(s);
        document.write("<br>");
    }
    var div1 = document.getElementById("d1");
    p("文档节点" + document);
    p("元素节点" + div1);
    p("属性节点" + div1.attributes[0]);
    p("内容节点" + div1.childNodes[0]);
</script>
<br>
<script>
    //通过id获取元素节点
    var div1 = document.getElementById("d1");
    document.write(div1);
    document.write("<br>");
</script>
<br>
<script>
    //通过标签名获取元素节点
    var divs = document.getElementsByTagName("div");
    for(i = 0;i < divs.length;i++){
        document.write(divs[i]);
        document.write("<br>");
    }
</script>
<br>
<script>
    //通过类名获取元素节点
    var elements = document.getElementsByClassName("d");

    for(i = 0;i < elements.length;i++){
        document.write(elements[i]);
        document.write("<br>");
    }
</script>
<br>
<script>
    //通过表单元素的name获取元素节点
    var elements = document.getElementsByName("userName");
    for(i = 0;i < elements.length;i++){
        document.write(elements[i]);
        document.write("<br>");
    }
</script>
<br>
<script>
    //和通过id获取元素节点同样的代码 document.getElementById却无法获取元素节点。
    //这是因为javascript是解释语言，是顺序执行的。在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。
    var div2 = document.getElementById("d2");
    document.write(div2);
    document.write("<br>");
</script>
<div id = "d2">people</div>
<br>

<!--首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。-->
<!--因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue-->
<!--nodeName和nodeValue表示一个节点的名称和值-->
<!--如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as["id"]取出名称是id的属性-->
<!--as["id"].nodeValue-->
<script>
    //获取属性节点
    var div1 = document.getElementById("d3");
    var as = div1.attributes;
    document.write("div共有" + as.length + "个属性");
    document.write("分别是：");
    for(i = 0;i < as.length;i++){
        document.write("<br>");
        document.write(as[i].nodeName);
        document.write(":");
        document.write(as[i].nodeValue);
    }
    document.write("<br>");
    document.write("div的align属性是：" + as["align"].nodeValue);
    document.write("<br>");

</script>
<br>

<!--首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。-->
<!--然后借助nodeName和nodeValue把内容节点的名称和值打印出来。-->
<script>
    //获取内容节点
    var div1 = document.getElementById("d3");
    var content = div1.childNodes[0];
    document.write("div的内容节点名是：" + content.nodeName);
    document.write("<br>");
    document.write("div的内容节点值是：" + content.nodeValue);
    document.write("<br>");
</script>

</html>

zn0999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记（五）

demo5.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>&l...
复制链接

扫一扫