美文网首页
2018-04-17JS基础,操作DOM树

2018-04-17JS基础,操作DOM树

作者: XGCrown | 来源:发表于2018-11-29 10:03 被阅读0次

1. JS基础(包括:输出,提示框,弹出框,打开新窗口,各种语句等)

2 JS操作DOM树(HTML文档结构)JS基础,操作DOM树

重点:

1.输出的方法?

alert()弹出框输出。

console.log(),console.dir(),console.error(),console.info(),console.warn()等输出到浏览器控制台。

document.write()和document.writeln()输出到文档,注意如果文档渲染完成后再使用此方法输出会覆盖原来的文档。

2.JS调用代码?

使用chrome或firefox浏览器自带的调试工具,快捷键f8继续执行,

f10跨越执行(主要是跨过函数),f11(步进,跳入函数中去执行)单步执行,shift+f11(步出,跳出函数)中断执行

3.对象的语法风格,对象的访问方式?

使用{}包裹,可以打点调用,也可以使用[]的形式调用。

函数的语法风格,函数的调用方式?

函数使用关键字function进行定义,函数名使用小驼峰(首字母小写,其他单词开头字母大写),命名规则与变量相同。

{}中是函数体,即函数的执行逻辑代码。函数可以有返回值,使用return关键字返回,也可以没有返回值。

4.运算符?

算术运算符,比较运算符,逻辑运算符,位运算符(不常用,自行了解)

算术运算符:+,-,*,/,%,++,--

比较运算符:>,<,>=,<=,!=,==,===

逻辑运算符:&&(and并列关系,与),||(or或者,或),!(not取反,非)

5.语句?

if...else...

switch

for(for/in)

while(do...while...)

break

continue

return

其中:

分支语句包括:if...else...,switch

循环语句包括:for,for...in...,while,do...while...

中断语句包括:break,continue

返回语句包括:return

6.JS获取DOM方式?

旧方法:

document.getElementById()

document.getElementsByClass()

document.getElementsByTagName()

document.getElementsByName()

新方法:

document.querySelector()

document.querySelectorAll()

其他方法:

document.documentElement

document.head

document.title

document.body

document.all

document.anchors

document.images

document.forms

document.scripts

document.links

7.JS更改元素内容?

操作元素对象的如下属性:

innerHTML,innerText, textContent

JS创建元素?createElement()

JS添加元素到某个容器?appendChild()

JS插入元素?insertBefore()

JS删除元素? removeChild()

JS替换元素?replaceChild()

相关文章

  • 2018-04-17JS基础,操作DOM树

    1. JS基础(包括:输出,提示框,弹出框,打开新窗口,各种语句等) 2 JS操作DOM树(HTML文档结构)J...

  • javascript基础系列:DOM相关的技术知识点

    javascript基础系列:DOM相关的技术知识点 DOM及其基础操作 DOM: document object...

  • 11 js06 DOM

    DOM、DOM结构树、dom元素系列操作: 1、DOM:文档对象模型(Document Object Model ...

  • 操作DOM—DOM基础

    一、访问节点 1)相对当前节点访问节点 提示每个节点都有一个childNodes属性,改属性保存着一个nodeLi...

  • react基础入门:(二)原生JS操作DOM元素

    原文链接:react基础入门:(二)原生JS操作DOM元素 一 初始化项目 二 操作 DOM 获取 dom 元素 ...

  • [JavaScript] (Day-18) - 操作表单

    用 JavaScript 操作表单和操作DOM是类似的,因为表单本身也是 DOM 树 用 JavaScript 来...

  • DOM基础操作

    查找:el.childNodes:子节点 el.children:子元素(不是 标准中的操作)el.lastEle...

  • 第五课 js dom编程

    DOM基础概念、操作 DOM是什么 DOM全称为The Document Object Model,应该理解为是一...

  • js dom编程

    DOM基础概念、操作 DOM是什么 DOM全称为The Document Object Model,应该理解为是一...

  • vue中的diff算法分析

    根据变更通知生成新的virtual dom树跟之前的virtual dom树进行diff & patch操作。 一...

网友评论

      本文标题:2018-04-17JS基础,操作DOM树

      本文链接:https://www.haomeiwen.com/subject/vspukftx.html