javascript文档对象节点数组限定符的学习

最新推荐文章于 2023-11-08 18:08:04 发布

ACE1125

最新推荐文章于 2023-11-08 18:08:04 发布

阅读量261

点赞数 2

分类专栏：前端文章标签： DOC test 限定符数组

本文链接：https://blog.csdn.net/h_h_1122/article/details/97647384

版权

文档对象模型1.DOM把html文档看成由元素，属性和文本组成的一棵倒立的树名称描述bgColor 页面的背景颜色fgColor 文本的前景颜色title 页面标题document对象该对象的方法主要用于操作文档节点，控制其内容和外观。常用方法：write:用于向html文档中动态输入内容getElementById:获取指定id的html页面元素...

摘要由CSDN通过智能技术生成

文档对象模型
1.DOM把html文档看成由元素，属性和文本组成的一棵倒立的树
名称   描述
bgColor   页面的背景颜色
fgColor   文本的前景颜色
title   页面标题

document对象
该对象的方法主要用于操作文档节点，控制其内容和外观。
常用方法：
write:用于向html文档中动态输入内容
getElementById:获取指定id的html页面元素对象
getElementsByTagName:返回所有指定标签名的HTML页面元素对象
getElementsByName:获取一组指定name的html页面元素对象
createElement:创建代表某个html元素的对象
document.getElementById(id)：通过id访问页面元素
<body>
   <script type="text/javascript">
       document.title="document的属性";
       document.bgColor="blue";
       document.write("document对象的学习")
       document.fgColor="white";
       function setContent(){
           var obj=document.getElementById("content");
           obj.innerHTML="<h3>动态添加标题</h3>";
       }
function setStyle(){
           var obj=document.getElementById("content");
           obj.style.borderColor="red";
           obj.style.borderStyle="solid";
           obj.style.borderWidth="2px";
           obj.style.color="orange";
       }
   </script>
   <div id="content">

   </div>
   <input type="button" value="添加内容" οnclick="setContent()" />
<input type="button" value="修改样式" οnclick="setStyle()" />
   </body>

几乎所有的元素对象都有innerHTML属性。innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容。

className属性
<style type="text/css">
       .con{
          width: 600px;
          height: 600px;
          border: double;
          background: yellow;
       }
   </style>
   <body>
   <div   id="content"></div>
   <input type="button" value="修改样式" οnclick="setStyle()" />
   <script type="text/javascript">
       function setStyle(){
           var obj=document.getElementById("content");
           obj.className="con";
       }
   </script>
   </body>
document.getElementsByName(name):通过name访问页面元素。
参数name为必选项，为字符串类型。返回值为数组对象，如果无符合条件的对象，则返回空数组。

checkbox应用：
<body>
       <th>
           <input type="checkbox" id="allCb" οnclick="check()" />全选
       </th>
       <td><input type="checkbox" name="item" /></td>
       <td ><input type="checkbox" name="item" /> </td>

       <script type="text/javascript">
           function check(){
               var cb1=document.getElementById("allCb");
               var chs=document.getElementsByName("item");
               for(var i=0;i<chs.length;i++){
                   chs[i].checked=cb1.checked;
               }
           }
       </script>
   </body>

document.getElementsByTagName(tagname):通过标签签名访问页面元素。参数tagname为必选项，为字符串类型。返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组。

当鼠标移动到菜单上时，修改菜单的背景图像；当鼠标移开时，菜单恢复原来的样式。
<body>
&

最低0.47元/天解锁文章

ACE1125

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript文档对象节点数组限定符的学习

文档对象模型1.DOM把html文档看成由元素，属性和文本组成的一棵倒立的树名称描述bgColor 页面的背景颜色fgColor 文本的前景颜色title 页面标题document对象该对象的方法主要用于操作文档节点，控制其内容和外观。常用方法：write:用于向html文档中动态输入内容getElementById:获取指定id的html页面元素...
复制链接

扫一扫

专栏目录