dom属性指定的容器不存在(dom属性不能为空)

这里我想了想还是讲一些吧,算是一个基础的了解,在真实的工作中,我们更多的是用到后面的jquery去操作,这里只是简单讲一下,让大家了解,怕大家到jquery那里不明白。

我们以下操作都会使用以下的html的文件:

<html>
    <head>
        <title>js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
        <div id="container_id">
            我是div块
        </div>
        <div class="container_class">
            我是div块1
        </div>
        <div class="container_class">
            我是div块2
        </div>
    </body>
    <script type="text/javascript" src="./index.js">
    </script>
</html>

js获取html中的内容

// 通过getElementId获取
var dom = document.getElementById("container_id");
console.log(dom.innerHtml);
console.log(dom.innerText);
// 通过getElementsByClassName获取
var doms = document.getElementsByClassName("container_class");
console.log(doms);
console.log(doms[0].innerText);

dom属性指定的容器不存在(dom属性不能为空)插图

注:

getElementById:是通过html元素的id属性来获取,由于id是唯一的,所以,会直接获取dom元素;

getElementsByClassName:是通过html元素的class属性来获取,由于class可以被多个html元素使用,所以,获取到的是一个数组。

获取到dom元素之后,我们就可以获取到dom元素内部的内容,innerHtml会获取到内部的包含html标签的内容,从上面的例子我们可以看出来;而innerText只会获取到内部的文本内容。

js更改html中的内容

上面既然能获取dom元素的内容,我们就能通过js来进行更改。

// 通过getElementId获取
var dom = document.getElementById("container_id");
console.log(dom.innerHTML);
console.log(dom.innerText);
// 通过getElementsByClassName获取
var doms = document.getElementsByClassName("container_class");
console.log(doms);
console.log(doms[0].innerText);

dom.innerHTML = "<div>我是新更改的</div>";
//dom.innerText = "我是另外新更改的"; // 可以尝试看下输出效果

注:

要更改dom元素内部的内容,直接 dom元素.innerHtml = "想要赋的值就行";或者dom元素.innerText = "想要赋的值就行";

js更改html中的属性

var dom = document.getElementById("container_id");
dom.setAttribute("style","color:red;background:blue");

注:以上代码我们通过setAttribute来给dom元素设置属性,这里我们设置了字体红色,背景蓝色。同样的你也可以添加其他属性。

js获取html中的属性

var dom = document.getElementById("container_id");
dom.setAttribute("style","color:red;background:blue");
var cssstyle = dom.getAttribute("style");
console.log(cssstyle);
var csscolor = dom.style.color;
console.log(csscolor);

注:我们通过getAttribute获取了dom元素的style的属性值;

使用dom元素.style.属性 我们获取了对应的style中的颜色值;

**本论坛部分作品是由网友自主投稿和发布、编辑整理上传,对此类作品本论坛仅供提供学习交流和参考,禁止用户用于商业行为,并请于下载后24小时内删除,若喜欢该作品请联系原作者购买正版。如果您发现论坛上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。
158学习网首页 » dom属性指定的容器不存在(dom属性不能为空)
关于售后:
(1)、因部分资料含有敏感关键词,百度网盘无法分享链接,请联系客服进行发送;
(2)、所有资料在您未收到之前,都可以联系微信/QQ:406499404,无条件退款
(3)仅支持原渠道退回,微信支付,支付宝退回至您当初选择的付款方式
(4)不用担心不给资料,如果没有及时回复也不用担心,看到了都会发给您的,请放心!
(5)因部份资源来源互联网,本站不担保其完整性,请知悉!
158学习网

提供最优质的资源集合

立即查看 了解详情
赞助VIP 享更多特权,建议使用 账号登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡