我们接着来学习js的一些基础知识点。

1.document:

document是window对象的一个属性。window对象表示浏览器中打开的窗口。如果文档包含框架(frame或者iframe),浏览器会为HTML文档创建一个window对象,并为每一个框架创建一个额外的window对象。所有的全局函数和变量都属于window对象的方法和属性。可以在浏览器中console一下window对象和document对象,理清它们的关系。

document常用属性:

  document.title//设置文档标题,与HTNL中的title标签等价

  document.bgColor//设置页面背景颜色

  document.fgColor//设置页面前景色

  document.fileCreateDate//文件建立日期,只读属性

  document.fileModifiedDate//文件修改日期,只读属性

  document.URL//可返回当前文档的URL

  document.linkColor//未点击过的链接颜色

  doucment.alinkColor//鼠标在此链接上的颜色

  document.vlinkColor//已点击过的链接颜色

  document.charset//设置字符集,简体中文为gb2312

  document.fileSize//文件大小,只读属性

  document.cookies//设置和读出cookie
 

document常用方法:

    document.createElement(Tag)//创建HTML元素

  document.getElementById(ID)//获得指定id值的对象

  document.getElementByName(name)//获得name值的对象

  document.write()//动态向页面写内容

  document.body.appendChild(oTag)//向节点添加最后一个子节点

2.HTML DOM:
    网页被加载时,浏览器会创建DOM对象
    DOM是一颗对象的树
    
3.js可以改变HTML元素、属性、样式、对事件作出回应、改变HTML输出流

    document.write("some text...")
document.getElementById("eid").innerHTML="new text"
document.getElementById("eid").src="..."
document.getElementById("eid").style.color="gray"

4.查找元素:
    id查找    document.getElementById("eid");
    标签查找    var x=document.getElementById("eid");var y=x.getElementsByTagName("p");
    类查找    document.getElementsByClassName("eclass");
    
5.HTML DOM事件:
    分配事件:document.getElementById("eid").onclick=function(){}
    onload与onunload事件    网页加载
    onchange事件    结合对输入字段的验证
    onmouseover与onmouseout        鼠标移到或者离开元素
    onfocus事件        元素获得焦点
    
6.节点(增加或者删除HTML元素):

    <script type="text/javascript">
var para=document.createElement("p");
var tnode=document.createTextNode("这是新段落哦!");
para.appendChild(tnode); document.getElementById("div1").appendChild(para);
</script> <script type="text/javascript">
var par=document.getElementById("pid");
var chi=document.getElementById("cid");
par.removeChild(chi);
</script>

js03的更多相关文章

  1. Vue.js-03:第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  2. Vue.js03:v-model实现简易计算器

    v-model用于数据的双向绑定.bug不少,凑合看吧,主要是练习v-model. <!DOCTYPE html> <html lang="en"> < ...

  3. d3.js--03(增删改查)

    选择元素 d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部 插入元素 append():在选择集末尾插入元素 insert():在选择集前面插入元 ...

  4. js---03属性操作

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. js03 数组

    变量的自动转换=== 等同符:不会发生类型的自动转化! == 等值符:会发生类型自动转化.自动匹配!判断相等没有equals()方法,只有2个等号3个等号. <!DOCTYPE HTML PUB ...

  6. JS-03 牛客网练习

    1.很多人都使用过牛客网这个在线编程网站,下面是自己做的该项所有练习,已通过网站和老师检查无误,分享给大家. 2.先说一下题目的位置:牛客网https://www.nowcoder.com/activ ...

  7. node.js03 第一个node.js程序和读取文件

    Hello World 1.创建运行 创建txt文件起名为hellonode,在记事本中编写JavaScript脚本文件 例如: var bbl = 'hellonode' console.log(b ...

  8. js基础知识梳理(最简版)

    基础的JavaScript知识,只放XMind截图.小白 JS01 JS02 JS03 最基础的js知识--!

  9. JS笔记—02

    1.String截取:substr:截几位, substring:截到哪. 2.String的操作,例如变大写,小写,本身不会变,只是在栈里交换引用似的 var str = "hello w ...

随机推荐

  1. 2018.08.30 NOIP模拟 graph(dfs序/树剖+线段树)

    [描述] 给你一个图,一共有 N 个点,2*N-2 条有向边. 边目录按两部分给出 1. 开始的 n-1 条边描述了一颗以 1 号点为根的生成树,即每个点都可以由 1 号点 到达. 2. 接下来的 N ...

  2. Django的路由层(1)

    https://www.cnblogs.com/yuanchenqi/articles/8876685.html URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为 ...

  3. ssh到远程执行命令并返回

    假设有三台机器 host1,host2,host3,host1能免密登录其他两台.要在第一台的机器里面写一个脚本分别删除每台机器的/root/test.txt rm -rf /root/test.tx ...

  4. webuploader在ie7下的flash模式的使用

    webuploader在ie7下不能使用h5模式上传图片,只能使用flash模式. 但是出现了几个问题:(1)必须正确的引入.swf文件,才能使webuploader正常运行             ...

  5. Flex box 弹性盒子布局

    display: -webkit-flex 标识使用弹性布局 flex: num  占容器的比例   Flex等比划分 导航1 : Flex :1;  导航2  Flex: 2;     ————&g ...

  6. VC++ 定制应用程序的外观

    一.在窗口创建之前改变窗口的大小和标题 要改变应用程序窗口的大小可以通过在PreCreatWindowl函数中修改CREATSTRUCT结构体变量成员的值 BOOL CMainFrame::PreCr ...

  7. hdu 4993

    http://acm.hdu.edu.cn/showproblem.php?pid=4993 满足ax + by = c的x,y对数 水题,暴力 #include <cstdio> #in ...

  8. 对SpringDAO层支持的总结

    1.问题 1.JDBC/ORM框架(如Hibernate)开发中编程模型有哪些缺点?  如JDBC   2.解决方案(模板设计模式,本质:将可变的和不可变的分离) 模板方法模式:定义操作的步骤(固定的 ...

  9. Spine输出资源一键入Unity3D工具代码

    之前预研过2D骨骼动画编辑工具SPINE,感觉其比cocosStudio及Unity3D自带的骨骼动画编辑器(原生Sprite Tree或Uni2D)要更适合有3DSMax习惯的美术,即Spine更容 ...

  10. [leetcode] 17. Merge Two Sorted Lists

    这个非常简单的题目,题目如下: Merge two sorted linked lists and return it as a new list. The new list should be ma ...