LV2之-----day5 js的 DOM操作大合集

LV2之-----day5 js的 DOM操作入门

参考: 前端知识大合集 超酷！！?

1.js 基础 – DOM 操作
2.JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
3.js-DOM-页面元素的兼容性、常用事件、节点
4.Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
---------------------------简要笔记--------------------------------------
JS day6&7
1.DOM操作
元素 属性 文本 三大节点（换行也算一个文本节点）
要减少dom的操作，会影响性能
全称：document object moudle
console.log(document. body.hasChildNodes( ) )------判断是否有子元素
console.log(document. body.ChildNodes)------打印出所有子节点
会出现一个类数组Node.lest，将结果集合 放入其中（书写结构中换行也算一个节点 及文本类型）
document .body. hasChildNode( )-----判断body是否有子节点，返回ture、false
.childElementCount------获取纯粹的 元素节点 的个数

console.dir( )----查看其属性
.nodeType ------判断节点类型
.nodeName-----元素节点名字
.nodeValue-----节点值

常见节点类型：元素节点—1
文本类型—3 节点----1
注释------8

nodeType:节点类型
标签：1
属性：2
文本：3
nodeValue:节点值
标签：null
属性：属性值
文本：文本内容本身
.children-----子元素组（不包含文本节点 如：换行）
.childElementCount-----子元素个数
.nextSibling-------下一个兄弟，含换行
.nextSibling-------下一个兄弟，不含
.previousElementSibling------上一个兄弟
parentNode------父节点

.htmlcollection 集合不能直接赋属性

标签 类型 名字 值
div 1 大写的标签名 文本的内容
属性 2
文字 3 #text null

2.获取方法：
var a=document.getElementsByTagName(" h3")
console.log(h3【0】)-------集合 HtmlCollection
.getElementsByClassName（ “”）------集合 htmlCollection
.getElementsByElementsByName(’ ‘)-----集合 htmlCollection
.getElementsById(’ ')-----唯一的一个

3.查找上一个 下一个
console.log(document.body.firstChild)-------第一个节点
.firstElementChild-------第一个元素节点，只包含元素不包含文本
.lastChild-----
lastelementchild-----
.
4.
var big=document.querySelector( ’ .box / #small / h3 ’ )----始终获取第一个，类似于jq中的$
console.log(box)
.querySelectorAll(’.big ')------获取所有的
console.log( )
5.节点操作：
创建
document.createElement( )-------创建u一个元素
document.createTextNode(‘ 新创建的文字’ )—创建一个文本节点
添加
.appendchild( )—如同剪切
删除 -----removeChild(h3[ 0] )
替换------replaceChild(新元素，替换谁）
指定位置添加-----insertBefore( )—指定位置添加
克隆------.cloneNode( )------括号中不写时默认为false 代表 只复制节点，ture 代表深复制 ，结构和文本内容）
innerhtml
outerhtml-----可理解为将父元素整个替换
6.BOM 专门操作浏览器窗口的API ，至今为止没有标准
下午-------

style行间样式 是js的操作范
空子串—转整 NaN

要给初始值才能进行style的设置，叠加 box.style.marginleft=0;
parsInt( box.style.marginLeft)+200+“px”

计算样式：
document.defaultView.------dom浏览器 只能获取不能设置
box.current

----------------------------------疑点------------------------------
对象和变量的区别

for in --------遍历对象，遍历的是键名
： for（var i in allcity）
二维数组
HTMLCollection 与 nodeListb区别
函数按值传递

笔试题：区分DHTML,HTML,XHTML,XML
DHTML: 一切实现网页动态效果的技术统称。html+css+js
HTML：专门编写网页内容的语言.

XHTML：更严格的HTML标准。
XML: 可扩展标记语言（可以自定义标签名）