js基础代码

最新推荐文章于 2024-06-17 02:47:03 发布

千篇不一律

最新推荐文章于 2024-06-17 02:47:03 发布

阅读量3.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_41063141/article/details/93141013

版权

文章目录

DOM文档对象模型
js获取iframe里面的html

DOM文档对象模型

document —一个html文件就是一个文档
object -----每个标签都是对象（如window–>html，–>head，body，p，span）
model -----对象之间的关系（标签与标签之间是有关系的）想族谱一样，或者像一颗树一样。有根，有叶子，有结点（文档的每个部分都可称为节点分为：文档–节点类型为9，元素【即标签】–节点类型为1，属性–节点类型为2，文本节点–节点类型为3），有分支。head和body是兄弟，但它们又是html的儿子，p和span和html的孙子。
内容
这里内容是文本节点

获取文本内容：document.getElementById(“btn”).innerHTML
修改文本内容：document.getElementById(“btn”).innerHTML=“我是一个按钮

节点的信息(属性)

	节点类型	节点名字	节点值
	`nodeType(数值)`	`nodeName`	`nodeValue`
元素节点	1	标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本
注释节点	8	#comment	注释的文字
文档节点	9	#document	null

综合案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>你喜欢那个城市</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>天津</li>
            <li>贵阳</li>
            <li>上海</li>
        </ul>
        <br>
        <p>你喜欢哪款单机游戏</p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>魂斗罗</li>
            <li>炸弹超人</li>
            <li>俄罗斯方块</li>
        </ul>
    </div>

    <form>
        姓名：<input name="uname" type="text" value="">
        密码：<input name="upassword" type="password" value=""><br>
        性别：<input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
    </form>
    <br>
    <h1>通过document对象获取元素节点及节点内容</h1>
    <hr>
    <br>
    <span id="getBj">通过getById读取“北京”</span>
    <br>
    <br>
    <span id="getAllLi">通过getByTagName读取"所有的li"</span>
    <br>
    <br>
    <span id="getInputName">通过getByName读取"获取表单内的所有的name的值"</span>

    <br>
    <h1>通过具体的元素节点获取其子节点及子节点内容</h1>
    <hr>
    <br>
    <span id="getElementsByTagName">通过getElementsByTagName(注意：这与document.getElementsByTagName()方法名字虽然是一样的，但方法调用的对象不同)读取“指定标签的后代节点”</span>
    <br>
    <br>
    <span id="childNodes">通过childNodes读取"当前节点的所有子节点"</span>
    <br>
    <br>
    <span id="firstChild">通过firstChild读取"当前节点的第一个子节点"</span>
    <br>
    <br>
    <span id="lastChild">通过lastChild读取"当前节点的最后一个子节点"</span>
</div>

<script type="text/javascript">
     /**
      * 通过document对象获取元素节点及节点内容
      */
    //innerHTML获取元素内部的html代码
    document.getElementById("getBj").onclick=function () {
        alert(bj.innerHTML)
    }
    document.getElementById("getAllLi").onclick=function () {
        var lis=document.getElementsByTagName("li")
        for(var i=0;i<lis.length;i++){
            alert(lis[i].innerHTML)
        }
    }
    //获取表单内的name的属性
        /**
         * input是一个自结束标签，它内部没有html代码，所有不能对他使用innerHTML
         * 使用  .  运算符读取对象的属性，但class属型要用.className
         *
         */
        document.getElementById("getInputName").onclick=function () {
            var inputNameValue=document.getElementsByName("gender")
            for(var i=0;i<inputNameValue.length;i++){
                alert(inputNameValue[i].value)
            }
        }
        console.log(document.body.innerHTML.toString())

       //----------------------------------------------------------------------------------
     /**
      * 通过具体的元素节点获取其子节点及子节点内容
      */
     document.getElementById("getElementsByTagName").onclick=function () {
         var divList=document.getElementsByTagName("div")
         /**
          * getElementsByTagName是从0，1，2，3开始。。。。0是特殊的#text节点类型
          */
         alert("节点类型:"+divList[0].nodeName+"   它的id:"+divList[0].id)
         var childNodesObjectList=divList[0].childNodes
             /**
              * childNodes节点是从1，2，3开始计数
              */
         alert("节点类型:"+childNodesObjectList[1].nodeName+"  它的class："+childNodesObjectList[1].className)
       //  alert("节点类型： "+childNodesObjectList[1].nodeName+  "它的class："+childNodesObjectList[1].className)
         var lastLabel=childNodesObjectList[1].innerHTML
        alert(lastLabel)
        /**
         *  var lastLabel=childNodesObjectList[1].lastChild  得到的是#text类型的对象，它是默认生成的记录标签对象的信息对象类型==可用字节码文件来理解他。数组对象的0号或最后一号元素就是它#text
         *  console.log(lastLabel)
         */
     }
</script>
</body>
</html>

js获取iframe里面的html

<html lang="en">
<head></head>
<body>
        <div class="container">
            <div class="label">
                <span style="color:red" onclick="fun()">发帖</span>
            </div>
            <div id="preview" class="pane">
                <iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin allow-top-navigation-by-user-activation" id="getHtml"></iframe>
            </div>
        </div>
<script>
    function fun(){
        /**
         * 先通过id获取到iframe，
         * document.getElementById("getHtml").contentWindow拿到的是iframe对应的window对象，即窗口对象。
         * 可以是远程的浏览器窗口，也可以是本地的浏览器窗口
         * 级别大小是  window____> document__________>元素
         *
         * 重加载iframe窗口      contentWindow.location.reload(true);
         */
        document.getElementById("getHtml").contentWindow.location.reload(true);
        var aa = handleChange($panes, $outputTypeElem.value);
        console.log(aa)
        var bb=aa.getElementsByTagName("iframe")
            /**
             * 先获取iframe所在的window对象，在通过该对象拿到ducument，然后就可以像操作正常的DOM一样取值了
             * aa.getElementsByTagName("iframe")[0].contentWindow.document.body.innerHTML
             *
             * 由于这个太长了，所以我们可以取个代号----通用的简洁的写法如下（相当于c语言的宏定义）
             *    
                  var $doc=aa.getElementsByTagName("iframe")[0].contentWindow.document;
                  $doc.body.innerHTML就可以了
             */
        alert(bb[0].contentWindow.document.body.innerHTML)
    }
</script>
</body>
</html>

千篇不一律

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
js基础代码

文章目录DOM文档对象模型js获取iframe里面的htmlDOM文档对象模型document —一个html文件就是一个文档object -----每个标签都是对象（如window–>html，–>head，body，p，span）model -----对象之间的关系（标签与标签之间是有关系的）想族谱一样，或者像一颗树一样。有根，有叶子，有结点（文档的每个...
复制链接

扫一扫