JS DOM入门

作者: 大笑_876c | 来源:发表于2018-04-10 18:59 被阅读0次

1.JS初级主要就两个作用
一、通过Dom找元素
二、给元素添加/删除class

2.Node类型
Node.ELEMENT_NODE === 1 //true,元素节点
Node.TEXT_NODE === 3 //true,文本节点
Node.COMMENT_NODE === 8 //true,注释节点
Node.DOCUMENT_TYPE_NODE === 10 //true,例:<!DOCTYPE html>
Node.DOCUMENT_FRAGMENT_NODE === 1
假设我们要判断一个Node是不是元素,我们可以这样判断
if(someNode.nodeType == 1){
console.log("Node is a element");
}
3.tagName
通过getElementsByTagName方法寻找节点要注意参数大写
例:
let brother = li.getElementsByTagName('UL')[0];
上面例子中getElementsByTagName这个方法寻找的是li元素的后代,并按顺序返回所有的ul,返回的是一个数组,要写上[0]。
4.getAttribute
当给a元素的href属性写上别的元素id时想实现锚点跳转时
a.href //这样获取href,浏览器会给href加上http协议
a.getAttribute('href') //这样获取的才是href本身
5.target和currentTarget
x.target //x.target是我们操作的那个元素,若a里包含了个span,那操作的就是span
x.currentTarget //x.currentTarget是我们监听的元素,就是x这个元素
6. 选择器
let a = document.querySelector('a[href="' + id + '"]') //返回选中的元素
let aTags = document.querySelectorAll('.topNavBar nav>ul>li a') //返回选中的元素数组
7.children
var c = div.children; //会获得div下的所有子标签
var c = div.childNodes; //会获得div下的所有子标签加文本标签
8.console.log调试大法
出问题了就在每一步console.log,能解决很多问题

相关文章

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

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

  • js dom入门

    作者:bertram Cao时间:2018.4.11 一、目录 javascript简史 基础语法 dom简介 j...

  • JS DOM入门

    1.JS初级主要就两个作用一、通过Dom找元素二、给元素添加/删除class 2.Node类型Node.ELEME...

  • 你毛毛的前端入门书目

    入门级 JavaScript DOM编程艺术 原生html css js 入门级教材主要是编程的思想 高...

  • Day7:virtual dom & MVVM

    virtual dom 什么是virtual dom 虚拟dom 用JS模拟DOM结构 DOM变化的对比,放在JS...

  • 十一 ECharts 入门

    ← AntV 入门案例:销售柱状图 ECharts 的绘图流程引入 js 库编写渲染容器 DOM,添加 width...

  • virtual dom

    virtual dom --- 即虚拟dom 1.用js模拟DOM结构 2.DOM变化的对比,放在js层来做(js...

  • React 入门(阮一峰教程笔记)

    一 react.js react-dom.js Brower.js react.js 核心库 react-dom....

  • JQuery

    JQuery 基础:概念快速入门JQuery对象和JS对象区别与转换选择器DOM操作案例 JQuery 基础: 概...

  • DOM

    DOM JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

网友评论

    本文标题:JS DOM入门

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