JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

时间:2022-09-01 14:53:13

javascript-对文档对象的内容、属性、样式的操作

一、操作内容
  1.  innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签)
  2.  innerText 用来设置或获取对象起始和结束标签内的内容 (兼容IE,获取文本)
       textContent用来设置或获取对象起始和结束标签内的内容 (兼容FF,获取文本)

      注意区别innerHTML和innerText,第一个会识别样式,第二个只会识别文本

        但是在FF中不兼容,要使用textContent,以下是兼容函数 

        支持document.all的是IE

function getContent (objs,val) {
if(document.all){
if(val){
objs.innerText=val
}else{
return objs.innerText
}
}else{
if(val){
objs.textContent=val
}else{
return objs.textContent
} }
}
window.onload=function () {
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var but=document.getElementById("but");
but.onclick=function () {
//var contents=div1.innerHTML;
//div2.innerHTML=contents;
var contents=getContent(div1)
getContent(div2,contents);
}
}
<div  class="one" id="div1">
<h3>
欢迎收看后盾网视频教程,收看高清版请登录后盾网论坛!
</h3>
</div>
<input type="button" value="↓↓" id="but" >
<div class="two" id="div2">
</div>

  3.  outerHTML 用来设置或获取包括本对象在内起始和结束标签内的内容(识别html标签)

       outerText 用来设置或获取包括本对象在内起始和结束标签内的内容

二、操作属性
  1.直接操作
    对象.属性
    对象.属性=值 (设置、获取、添加属性(属性值))

  2.获取和设置

    getAttribute("属性") 获取给定的属性的值
    setAttribute("属性","值") 设置或是添加属性

  window.onload=function  () {
var links=document.getElementsByTagName("a")[0];
//alert(links.href)
//links.href="2.html";
//alert(links.title)
//links.title="后盾网";
//links.title="后盾网";
//getAttribute("属性") 获取给定的属性的值
// setAttribute("属性","值") 设置或是添加属性 alert(links.getAttribute("href"))
links.setAttribute("href","2.html") }

三、操作样式

  1.行内样式
    对象.style.属性
    对象.style.属性=值 (设置、获取、添加属性)

window.onload=function  () {
var one=document.getElementById("one");
one.onmouseover=function () {
//alert(one.style.color)
one.style.color="blue";
one.style.backgroundColor="red";
one.style.fontSize="13px";
}
one.onmouseout=function () {
one.style.color="red";
one.style.backgroundColor="blue";
one.style.fontSize="11px"; }
}
<a href="#" style="color:red;background-color:blue;padding:3px" id="one">链接</a>

    ****************************************************

    遇到属性是"-"链接的,要将"-"去掉,后面的单词的首字母大写
    ****************************************************

  

  2.css层叠样式

    1>通过更改ID来更改样式(一般不用,不更改ID)

<style>
#one{
width:200px;
height:200px;
border:1px solid red;
color:red;
font-size:14px;
padding:24px;
}
#two{
width:200px;
height:200px;
border:1px solid blue;
color:blue;
font-size:19px;
padding:15px;
}
</style>
<script>
window.onload=function () {
var one=document.getElementById("one");
var but=document.getElementById("but");
but.onclick=function () {
one.id="two";
} }
</script>
<div id="one" class="div1">
欢迎收看后盾网视频教程,下载高清版请到后盾网论坛下载,bbs.houdunwang.con;
</div>
<input type="button" value="更改样式" id="but">

    2>通过className更改样式

<style>
.div1{ height:200px;
border:1px solid red;
color:red;
font-size:14px;
padding:24px;
}
.div2{
width:200px;
height:200px;
border:1px solid blue;
color:blue;
font-size:19px;
padding:15px;
}
</style>
   window.onload=function  () {
var one=document.getElementById("one");
var but=document.getElementById("but");
but.onclick=function () {
one.className="div2";
}
}
<div id="one" class="div1" style="width:200px">
欢迎收看后盾网视频教程,下载高清版请到后盾网论坛下载,bbs.houdunwang.con;
</div>
<input type="button" value="更改样式" id="but">

    *******************************************

    适合批量更改
    *******************************************

    3>更改或者获取或者设置某个属性的值

    **************************************************************
    document.styleSheets[下标].rules[下标].style.属性
    document.styleSheets[下标].rules[下标].style.属性=值

    document.styleSheets 样式表的集合,即是<style></style>的数量
    document.styleSheets[0].rules 样式规则的列表,即其中的<div>等的个数
    document.styleSheets[0].rules.style 样式规则的集合
    document.styleSheets[下标].rules[下标].style.属性

alert(document.styleSheets[0].rules[0].style.width)

    适用于IE

    **************************************************************

    **************************************************************
    document.styleSheets[下标].cssRules[下标].style.属性
    document.styleSheets[下标].cssRules[下标].style.属性=值
    适用于FF
    ***************************************************************

    4> 动态的添加删除css样式规则
    document.styleSheets[下标].insertRule("选择器{属性:值}",位置) FF w3c
    deleteRule(位置) FF w3c

    document.styleSheets[下标].addRule("选择器","属性:值",位置) IE removeRule(位置) IE

 //document.styleSheets[0].addRule(".div1","margin:200px",0);
//document.styleSheets[0].removeRule(1);

  3.行内样式和css层叠样式通用的方式
    对象.currentStyle.属性 IE 用来获得实际的样式属性
    getComputedStyle(对象,null) FF 用来获得实际的样式属性

       //对象.currentStyle.属性  IE   用来获得实际的样式属性
//getComputedStyle(对象,null) FF 用来获得实际的样式属性
//alert(one.currentStyle.width)
alert(getComputedStyle(one,null).width)

    *******************************

    只能获取不能设置
    *******************************

JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作的更多相关文章

  1. JavaScript学习笔记(三)——对象

    第四章 理解对象 1 说明 对象的状态:属性,行为:方法: 对象定义放在花括号内: 用冒号分隔属性名和属性值: 用逗号分隔属性名和属性值对,包括方法: 最后一个属性值后面不加逗号: 属性名可以是任何字 ...

  2. DOM学习笔记(二)对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  3. JavaScript学习笔记(一)对象和属性

    对象属性的使用 JavaScript中的所有变量都可以当做对象使用,除了null和undefined. false.toString(); // 'false' [1, 2, 3].toString( ...

  4. JavaScript&colon;学习笔记&lpar;8&rpar;——对象扩展运算符

    JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...

  5. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  8. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  9. Java程序猿的JavaScript学习笔记(3——this&sol;call&sol;apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 需要正确安装 Microsoft&period;Windows&period;ShellExperienceHost 和 &quot&semi;Microsoft&period;Windows&period;Cortana&quot&semi; 应用程序。

    windows 10 开始菜单修复工具 Win10开始菜单修复工具出现的原因,自从升级到Windows  10,一直BUG不断,而其中有一个BUG非常的让你印象深刻,就是开始菜单无响应,你用着用着电脑 ...

  2. Android 网络图片查看器

    今天来实现一下android下的一款简单的网络图片查看器 界面如下: 代码如下: <LinearLayout xmlns:android="http://schemas.android ...

  3. Uploadify 3&period;2使用

    我今天介绍的Uploadify 3.2的,以前旧版本的并不适用,说到这个,我就火大,我也是第一次使用,也百度了下使用手册,结果坑爹的那些手册都是旧版的,新版的Uploadify接口和旧版的差太多了.废 ...

  4. 二维数组在text,image的应用

    NSArray *imageArr = @[@[@"查看地图",@"map_hy.png"], @[@"联系号码",@"phone ...

  5. HTML5线性图表 图表数据区域可着色

    这是一款基于Canvas的HTML5图表应用,在图表数据初始化的时候伴随动画效果. 在线演示: 点击演示 源代码下载: 点击下载 核心jQuery代码: var myData = {   labels ...

  6. 【读书笔记】【深入理解ES6】&num;2-字符串和正则表达式

    更好的Unicode支持 在ES6出现以前,JS字符串一直基于16位字符编码(UTF-16)进行构建. 每16位的序列是一个编码单元(code unit),代表一个字符. length.charAt( ...

  7. asp&period;net core系列 47 Identity 自定义用户数据

    一.概述 接着上篇的WebAppIdentityDemo项目,将自定义用户数据添加到Identity DB,自定义扩展的用户数据类应继承IdentityUser类, 文件名为Areas / Ident ...

  8. C&plus;&plus;&lowbar;day06&lowbar;运算符重载&lowbar;智能指针

    1.只有函数运算符可以带缺省函数,其他运算符函数主要由操作符个数确定 2.解引用运算符和指针运算符 示例代码: #include <iostream> using namespace st ...

  9. ElasticSearch入门 第七篇:分词

    这是ElasticSearch 2.4 版本系列的第七篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...

  10. 生成二维码的JAVA

    不多说,上代码 package tcc; import java.awt.Color;import java.awt.Graphics2D;import java.awt.image.Buffered ...