关于DOM

Posted 2020-12-25 liuguofu

1.动态Web开发技术:网页内容（后台）
jsp=html+java
asp=html+C#
php=html+php
2.DHTML（Dynamic HTML）（前端）：
页面表现，样式，行为 随着用户操作改变 HTML+CSS+javascript
即使用js增删改查html css 即实现交互效果
　　　　（1）.改变页面元素   （2）.与用户进行交互ajax   （3） .包括BOM和DOM
3.  （window document  history navigator location screen event）BOM对象-----------------宿主对象
    　js里每个html 元素都是一个对象（DOM对象）---DOM树
==========================================核心DOM
4.DOM--W3c组织的标准  核心DOM   HTML DOM     XML DOM。。
DOM 元素树：以document为根 每个html 标签都是元素树的一个节点 节点树的子集
DOM 节点树：以document为根 每个html 标签 文本 属性 注释都是节点树的一个节点、
 5.Node对象的属性
parentNode：父节点对象 childNodes：子节点----类数组对象  NodeList     firstChild:  lastChild    nextSibling previousSibling
6.节点名称：
nodeName String类型属性 只读
元素节点：标签名 属性节点：属性名
文本节点：#text 注释节点：#comment 文档节点：#document
nodeType：number类型
 nodeValue   string 类型
元素节点：null undefined 属性节点：属性值
文本节点：文本本身 注释节点：注释本身 文档节点：null undefined
7.innerHTML 元素节点属性  innerText 火狐不支持  textContent
8.attributes 操作  hasAttribute（）返回true false
9.元素属性不是子节点  普通元素节点没有 ById（）方法
10.HTML5 提供的新的 node.querySelector("")（返回第一个匹配的）node.querySelectorAll("") （返回所有）css选择器相通
元素树：parentElementNode children   firstElementChild  就是都加一个Element
11.页面中的新节点必须用document创建
12.添加新节点：parentNode.appendChild（）insertBefore(要插的节点，要插在谁之前)
13.document.createDocumentFragment();文档片段节点 添加从内往外添加
14.删除 替换
删除元素
n.removeChild(childNode)  replaceChild(new, old)
删除属性
removeAttribute（‘属性名’）
省市联动
==========================================HTML DOM
15、HTML DOM 比较 标准DOM 简单 但是兼容性没有后者好

html dom和 核心dom 区别  
对象：document node elementNode   html元素对象化
创建对象区别： var newNode=document.createElement("img");
        var newNode= new Image();
元素添加属性：node.setAttribute("","");
        node.id node.src  node.className node.style.
16.核心dom 适合创建删除节点  hmtl dom适合操作属性
html dom 只认识内置的属性
对象：Image  Table Form   disabled readonly  js中必须用boolean
input.select()选择全部文本
select.selectedIndex select.options[i].value
var option= new Option("text","value") select.add(option)